スクリプトに新しい行を追加するには

Question

こんにちは私のタイトルが役に立っているのかどうかは分かりませんが、私の問題はJS、CSS、HTMLでタイプライターエフェクトを作りたいと思っています。新しい行を追加しようとすると、新しい行が追加されます。新しい行は表示されません。

\t var str = "<p>I want to put text here then another line under this one</p>", 
 
\t <!--var str = "<p>text here</p>",--> <!--This is what I tried to do to add a new line--> 
 
    i = 0, 
 
    isTag, 
 
    text; 
 

 
(function type() { 
 
    text = str.slice(0, ++i); 
 
    if (text === str) return; 
 
    
 
    document.getElementById('typewriter').innerHTML = text; 
 

 
    var char = text.slice(-1); 
 
    if(char === '<') isTag = true; 
 
    if(char === '>') isTag = false; 
 

 
    if (isTag) return type(); 
 
    setTimeout(type, 80); 
 
}());

#typewriter { 
 
\t \t color: lime; 
 
\t \t text-align: center; 
 
\t }

<div id="typewriter"></div>

Answer 1

使用<br />

var str = "<p>I want to put text here<br /> then another line under this one</p>"; 

Answer 2

var str = "My text\nSome more text"; 
 
var stra = str.split(""); 
 
var tw = document.getElementById("output"); 
 
function type(){ 
 
    var char = stra.shift(); 
 
    if (char){ 
 
     tw.innerHTML += char; 
 
     setTimeout(type, 80); 
 
    } 
 
    
 
} 
 
type();

<pre id="output"></pre>

Answer 3

別の可能性は、を使用してグループparagragh要素であります0に設定し、スパンの表示スタイルプロパティをブロックに追加します。

window.onload = function() { 
 
    var str = "<p><span>I want to put text here then another line under this one</span><span>text here</span></p>"; 
 

 
    (function type(isInTagArg, indexArg) { 
 
    var index = indexArg || 0; 
 
    if (index >= str.length) 
 
     return; 
 

 
    var isInTag = isInTagArg || false; 
 
    if (isInTag == false) { 
 
     if (str.charAt(index) == '<') { 
 
     return type(true, index + 1); 
 
     } else { 
 
     document.getElementById('typewriter').innerHTML = str.substr(0, index + 1); 
 
     } 
 
    } else { 
 
     if (str.charAt(index) == '>') { 
 
     return type(false, index + 1); 
 
     } 
 
     return type(true, index + 1); 
 
    } 
 
    setTimeout(function() {type(false, index + 1)}, 80); 
 
    }()); 
 
}

#typewriter { 
 
    color: lime; 
 
    text-align: center; 
 
} 
 
#typewriter span 
 
{ 
 
    display: block; 
 
}

<div id="typewriter"></div>