我正在使用 IBM 的 Watson,现在我的文本被 <br> <br>
分割了<br>'s
之间有任意数量的空格.我尝试在 <br>'s
处拆分我的 JSON 文本和映射略有延迟,但它并没有真正起作用。我也试过不透明度和显示摆弄。 Here's a pen构建 HTML DOM 消息元素的代码如何工作。每个有效载荷都放入一个 div 中并同时显示。
我需要在 <br> <br>
处拆分每一行在前一个之后不久出现,就像即时消息效果一样。谢谢!
最佳答案
试试这个,你可能需要改进正则表达式以考虑浏览器的差异......等等:
const target = document.getElementById('target');
const newInnerHTML = target.innerHTML
.split(/<br>\s*/i)
.map((text, i) => '<p style="animation-delay:' + (400 * i) + 'ms">' + text + '</p>')
.join('');
target.innerHTML = newInnerHTML;
#target p {
opacity: 0;
animation: fade-in 2s forwards;
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id="target"> Hi, I'm Watson. <br> <br> I need to appear line by line.
</div>
关于javascript - 如何使 div 文本逐行显示而不是一次全部显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50099790/