javascript - HTML line break without <br> or n? - Stack Overflow

admin管理员组

文章数量:1426929

I have made a function that types string letter by letter into .html

var i = 0;
text = "lorem ipsum" + "</br>" + "lorem ipsum";
function type_it() {
if (i < text.length) {
    info_text.innerHTML += text.charAt(i);
    i++;
    setTimeout(type_it, 50);
    }
}

current output is "lorem ipsum <\br> lorem ipsum"
while i need
"lorem ipsum .
lorem ipsum".
the problem is I'm unable to use <\br> or \n to break text lines. The function types it as a string and they are not inserted into DOM

I have made a function that types string letter by letter into .html

var i = 0;
text = "lorem ipsum" + "</br>" + "lorem ipsum";
function type_it() {
if (i < text.length) {
    info_text.innerHTML += text.charAt(i);
    i++;
    setTimeout(type_it, 50);
    }
}

current output is "lorem ipsum <\br> lorem ipsum"
while i need
"lorem ipsum .
lorem ipsum".
the problem is I'm unable to use <\br> or \n to break text lines. The function types it as a string and they are not inserted into DOM

• javascript
• html

Share Improve this question Follow edited Feb 5, 2019 at 20:20 Wiktor Kisielewski asked Feb 5, 2019 at 20:09 Wiktor KisielewskiWiktor Kisielewski 43777 silver badges2020 bronze badges 8

• what are you having specifically problems with.? – Daniel A. White Commented Feb 5, 2019 at 20:09
• 1 I'm unable to use <br> or \n to break text lines <- Why are you unable to use those tags? – AndrewL64 Commented Feb 5, 2019 at 20:10
• function types it as a string and they are not inserted into DOM – Wiktor Kisielewski Commented Feb 5, 2019 at 20:12
• "unable to" as in "doesn't work" or "unable to" as in "not allowed to"? – Andy Commented Feb 5, 2019 at 20:13
• @Wiktor Kisielewski you don't want to use <br> or \n or they are not woking? – Maheer Ali Commented Feb 5, 2019 at 20:15

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 2

You can use white-space: pre to allow newlines (\n) to have an effect in HTML:

var i = 0;
var info_text = document.getElementById('foo')
text = "lorem ipsum\nlorem ipsum";
function type_it() {
if (i < text.length) {
    info_text.innerHTML += text.charAt(i);
    i++;
    setTimeout(type_it, 50);
    }
}

type_it()

#foo {white-space: pre;}

<div id="foo"></div>

... but that will only allow you to insert newlines, not any other HTML formatting.

Alternatively, you could modify your script to insert entire tags at once (<br>) instead of one character at a time.

This is necessary because to prevent the browser displaying partial tags as text: "<b" for example will display the < until the close bracket is written in.

Also, when adding html incrementally it seems the browser only interprets the tag it's just pleted writing; it doesn't go back and reinterpret content that was already inserted -- so if, for example, your string includes <b>bold</b>, and you add to the innerHTML one letter or tag at a time, the tags won't be visible, but neither will the bold.

This is easily fixed by replacing the entire contents of the element at each iteration, instead of adding a single character each time; that way the browser interprets the full string as html at every step.

var i = 0;
var info_text = document.getElementById('foo')
text = "lorem ipsum<br>lorem ipsum<p>more <b>tags, just <i>to</i></b> test</p><ul><li>one</li><li>two</li><li>three</li></ul>";

function type_it() {
  if (i < text.length) {
if (text.charAt(i) === '<') {
  // we've found a tag; find out how many characters it consists of 
  i = i + text.substr(i).indexOf('>') + 1
} else {
  // it's text, add a single character
  i++;
}
info_text.innerHTML = text.substring(0, i); 
setTimeout(type_it, 50);
  }
}

type_it()

<div id="foo"></div>

(Incidentally, I want to point out that </br> is not correct HTML; you may be misremembering the XML-style self-closing tag <br/> but that is also not correct for HTML5. Both errors are harmless, but ideally you would use the correct <br>.)

use the tag <p> to write every paragraph.
so you will not have to use the <br /> tags.

This works for me.

var i = 0;
var text = "test";
var info_text = document.getElementById("info_text");

function type_it() {

if (i < text.length) {
    info_text.innerHTML += "<div>" + text.charAt(i) + "</div>";
    i++;
    setTimeout(type_it, 50);
    }
}

type_it();

<div id="info_text"></div>

本文标签： javascriptHTML line break without ltbrgt or nStack Overflow