我为我的小型 JavaScript 项目编写了一个函数，该函数将文本打印到 div 中，类似于老式游戏中的对话框。我已在下面的代码片段中包含此函数的代码，尽管我认为这对于我的问题并不重要：
当我使用此功能时，当一个单词太长而无法容纳在一行中时，前几个字母通常会打印在当前行中。然后这个词跳到另一行并在那里结束。这会导致相当不愉快的效果。
我的问题是，我可以通过JS或CSS来阻止这种行为吗？有没有办法让函数提前知道新单词不适合当前行，并从头开始在新行中打印它，从而避免跳转？
我尝试了目标 div 的各种自动换行设置，但无济于事。我真的不知道哪个 CSS 属性导致了这种行为。感谢您的帮助。
我想摆脱“演示”或“效果”等词中的跳词。我希望它们从头开始打印到新行。
代码片段 （也在JSFiddle上）
async function echo(targetId, msg) {
let txtTarget = document.getElementById(targetId);
for (let i = 0; i < msg.length; i++) {
txtTarget.innerHTML += msg[i];
txtTarget.scrollTop = txtTarget.scrollHeight;
await this.sleep(55);
}
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
const myMsg = 'This is a test message. I hope it clearly demonstrates what I\'m asking for. I want to get rid of the …