如何在不断字的情况下用 vue-typer 断行

Posted 2023-02-22

【中文标题】如何在不断字的情况下用 vue-typer 断行

【英文标题】：How to break the line with vue-typer without breaking word

【发布时间】：2020-11-25 02:33:19

【问题描述】：

我正在使用 vue-typer，它会根据空间在屏幕上进行调整。但是，根据屏幕的大小，vue-typer 会打断单词。我想在我们有退格键的时候休息。代码是：

        <vue-typer 
           class="text-h4 font-weight-bold" 
           text="Nós acreditamos que o futuro pode ser incrível. Quer criar 
           ele com a gente?" :repeat='0'
        ></vue-typer><br>

Here is the image of how is working now

【参考方案1】：

为了将文本分成块，请考虑以下内容

data() 
    text : 'Hello World! I`m clarification masterjam!',
,
computed : 
    textComputed() 
        let n = "\n"
        let breaked = this.text.match(/.1,25/g);
        breaked[0];
        var pos = breaked[0].lastIndexOf(' ');
        breaked[0] = breaked[0].substring(0,pos)+n+breaked[0].substring(pos+1);

        return breaked.join('')
    ,

【讨论】：

请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助，质量更高，更有可能吸引投票。

【参考方案2】：

我不知道是否有人还在处理这个问题，我已经写了一个快速修复这个问题。它并不完美，但可以胜任。

您将通过一个自动添加换行符的方法运行文本。

           <div
              style="
                font-size: 30pt;
                margin: auto;
                color: white;
                max-width: 600px;
              "
              ref="theRef"
            >
              <vue-typer
                v-if="startTypers"
                :text="[
                  formatText(
                    'TextHere',
                    'theRef',
                    22
                  ),
                ]"
                :repeat="0"
                :shuffle="false"
                initial-action="typing"
                :pre-type-delay="70"
                :type-delay="70"
                :pre-erase-delay="2000"
                :erase-delay="100"
                erase-style="backspace"
                :erase-on-complete="false"
                caret-animation="blink"
              ></vue-typer>
            </div>

mounted() 
      setTimeout(() => 
        this.startTypers = true;
      , 150);
    

使用 startTypers 的原因是因为它们会在 div 被渲染之前运行 formatText 方法。这意味着您将无法获取父 div 的 clientWidth。

formatText(text, ref, textSize = 22) 
        let maxChars = Math.floor(this.$refs[ref].clientWidth / textSize);
        let words = text.split(" ");
        let breaked = "";
        let currentCount = 0;
        words.forEach((word) => 
          currentCount += word.length;
          currentCount += 1;
          if (currentCount >= maxChars) 
            currentCount = word.length;
            breaked = `$breaked\n$word `;
           else 
            breaked = `$breaked$word `;
          
        );
        return breaked;
      ,

formatText 的参数是要添加换行符的文本、引用的名称和渲染的跨度（字符）的大小（字体和字体的默认值为 22-我在我的用例中使用的尺寸，你的会有所不同）

希望这会有所帮助

【讨论】：

非常感谢！这对我很有帮助。

@NathieleMarssona 不用担心，很高兴我能提供帮助！