如何在不破坏字的情况下用vue-typer来打破线？

Question

我正在和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>

下面是现在工作情况的图像。

Answer 1

我不知道是否有人还在处理这个问题，我已经对这个问题写了一个快速的解决办法。它不是完美的，但它做的工作。

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

           <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的参数是您希望添加换行符的文本、引用的名称和呈现的span的大小(22是我在用例中使用的字体和字体大小的默认值，您的字体和字体大小会有所不同)。

希望这能帮上忙

Answer 2

为了将文本分解成块，请考虑以下几点

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('')
    },
}