如何在打字机效果中换行？答案

【问题标题】：How to go to new line in Type Writer effect?如何在打字机效果中换行？
【发布时间】：2021-04-23 06:22:30
【问题描述】：

我的#effect 具有在 JavaScript 中编写类型的效果，我希望在 textEffect 变量中使用 \n 的新行中键入文本，但整个文本只是键入连续，不管我在某些地方声明了\ns，

如何让我的textEffect 输入新行？

let x = 0;
let textEffect = "Hi, \n I'm Dorothy, \n\ have a good day!";
let container = document.getElementById("effect");

function animate() {
    if(x < textEffect.length){
        container.innerHTML += textEffect.charAt(x);
        x++;
        setTimeout(animate, 80);
    }
}
animate();

&lt;div id="effect"&gt;&lt;/div&gt;

【问题讨论】：

是的，CSS 是一种方式。另一种方法是if (textEffect.charAt(x) === '\n')，然后添加"<br>"。

标签： javascript text newline effects

【解决方案1】：

需要样式white-space: pre-line;。

let x = 0;
let textEffect = "Hi, \n I'm Dorothy, \n\ have a good day!.";
let container = document.getElementById("effect");

function animate() {
    if(x < textEffect.length){
        container.innerHTML += textEffect.charAt(x);
        x++;
        setTimeout(animate, 80);
    }
}
animate();

&lt;div id="effect" style="white-space: pre-line;"&gt;&lt;/div&gt;

【讨论】：