如何在打字机效果中转到新行？

问题描述

我对 #effect 使用 JavaScript 中的 Type Writing 效果，我希望在我在 \n 变量中使用 textEffect 的新行中输入文本，但是整个文本只是连续输入，无论我在某些地方声明了 \n，

如何在新行中输入 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();

<div id="effect"></div>

解决方法

需要样式 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();

<div id="effect" style="white-space: pre-line;"></div>