Insert line break in typewriting effect

Question

Here is my code:

<!DOCTYPE html>
<HTML>
    <HEAD>
    </HEAD>
    <BODY><p id="demo"></p><script>
        var i = 0;
var txt = 'Lorem ipsum dummy <br> text blabla.';
var speed = 50;

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}
typeWriter();
    </script>
    </BODY>
</HTML>

and yes I did steal this from w3schools.com

anyway I want to inset a BR tag into javascript but Every time I do it comes out as the actual text. How do i fix it?
(if you are confused I essantialy want a line break in a JavaScript text string)

Does this answer your question? [How to break line in JavaScript?](https://stackoverflow.com/questions/4768118/how-to-break-line-in-javascript) — B001ᛦ, Aug 04 '21 at 15:29
@B001ᛦ That does not answer the question here. See the issue here: https://jsfiddle.net/Lrsf2kvu/ — Unmitigated, Aug 04 '21 at 15:32
https://stackoverflow.com/questions/39325414/line-break-in-html-with-n — Roko C. Buljan, Aug 04 '21 at 15:37
https://stackoverflow.com/questions/4768118/how-to-break-line-in-javascript — Roko C. Buljan, Aug 04 '21 at 15:38
@Unmitigated Why did you reopen this question? It seems like a duplicate and was even acknowledged as a duplicate by the OP. — zero298, Aug 04 '21 at 16:03
@zero298 See my reply to B001ᛦ. The suggested duplicate does not solve the problem. — Unmitigated, Aug 04 '21 at 16:07
@Unmitigated if a question is marked as *duplicate* it does not means that it's *duplicate of the accepted answer* - It just means that the question was already asked, and that an answer might no necessarily be the accepted one. The only thing that's missing is how to present that `\n` in HTML - and there's a duplicate too for that matter. But nicely done for putting the two together in your provided answer. — Roko C. Buljan, Aug 04 '21 at 18:10
@RokoC.Buljan That question is not even asking the same thing as this one. None of the answers there completely apply either. — Unmitigated, Aug 04 '21 at 18:12

score 1 · Answer 1 · answered Aug 04 '21 at 15:33

You can set the CSS property white-space: pre-wrap (which allows sequences of whitespace characters to be preserved) on the paragraph element and directly use \n in the string to typewrite.

var i = 0;
var txt = 'Lorem ipsum dummy\ntext blabla.';
var speed = 50;

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}
typeWriter();

#demo {
  white-space: pre-wrap;
}

<p id="demo"></p>

score 1 · Answer 2 · answered Feb 01 '22 at 10:11

I was facing the same problem. The difference with the above-mentioned code was that I was inserting an array of texts.

None of the above-mentioned solutions seemed to work, whether it was inserting \n or a <br /> element. The solution suggested here, was also not working. I guess what the problem was, is that typewriter effect inserts the aforementioned solutions (inserting \n or a <br />) char by char, causing HTML not to recognize the break statements.

What I did was the following, I coded that every time the txt element, contained a "*", the typewriter function would at once insert a <br/> element in the HTML. This worked fine.

//e.g. of txt message: 
txt = `Please type one of the following commands to get to know me: **about *projects. **To contact me, insert contact in the command line.`

//e.g. of inserting the individual letters
       function insertLetter(i){
            return new Promise((resolve, reject) => {
                if(txt.charAt(i)==='*'){
                    document.getElementById(id).innerHTML += `<br/>`;
                    console.log("we were at the line break section")
                    resolve(i)
                }else{
                    document.getElementById(id).innerHTML += txt.charAt(i);
                    resolve(i);
                } 

            })
        }

This gives the following:

"Please type one of the following commands to get to know me:

about
projects.

To contact me, insert contact in the command line."

PS: contrary to the code that was present on W3 schools, I work with various .then statements, making sure that each letter is typed out before moving to the next letter. The same goes for multiple txt messages that I display which are stored in a txt array. I noticed that using the example of W3 can cause the letters to be mixed, as well as moving on to the next txt statements in the array before finishing the first typewriter effect.

Insert line break in typewriting effect

2 Answers2

Linked