Enter line break into typed text

[yannxaver]

Hello, is there any way to enter a line break into the typed text?

When I use <br />, it simply gets printed to the screen.

[bartlomein]

I've been using \n. Worked fine for me.

[Aleadinglight]

May be you should add this to your .css if you wanna use \n

vue-typer {
    white-space: pre;
}

[vanderbake]

If you're using it this way, it won't work:
<vue-typer text="Hi there, \nthis doesn't work at all!" />

However, if you insert it as a data property, it works:

<template>
  <vue-typer :text="typemachine" />
</template>
<script>
  import { VueTyper } from 'vue-typer'
  export default {
    components: { VueTyper },

    data () {
      return {
        typemachine: 'Hi there, \nAWESOME \nthis works!'
      }
    }
  }
</script>

Good luck!

[Declan-Watts]

I dont know if anyone is still dealing with this issue, I have written a quick fix to the issue. Its not perfect but does the job.

You will run the text through a Method that will auto add in the line breaks automatically.

           <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);
    }

The reason for the startTypers is because they will run the formatText method before the div has been rendered. Meaning you won't be able to get the clientWidth of the parent div.

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;
      },

The Parameters for formatText are the Text that you want to have the line breaks added in, The name of the ref, and the size of the span(Chars) that is rendered (22 was the default for the font and font-size I used in my use case, yours will vary)

Hopefully this helps