I'm working with vue-typer and it adjusts on screen according to the space. But, depending the size of the screen, the vue-typer breaks the word. I want to break just when we have backspace. The code is:
<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>
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
In order to break the text into chunks, consider the following
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('')
},
}