当我在 contenteditable div 中有 span 标签时，自动换行会发生变化。这是一个 fiddle 。 http://jsfiddle.net/knpB9/
<div contenteditable="true" style="width:168px; border:1px solid black;">aaaaaaaa-bbbbbbbb-ccccccc</div>
<br>
<div contenteditable="true" style="width:168px; border:1px solid black;">aaaaaaaa-bbbbbbbb-<span style="color:red;">ccccccc</span></div>
无论 html 标签如何，如何保持自动换行？
最佳答案
如果您想保留正常的换行符，您可以将跨度设置为display: inline-block;。
这是一个 jsFiddle .
如果您不关心单词中间的换行，这段 CSS 就可以解决问题:
div
{
white-space: pre;
}
这是一个 jsFiddle .
看看here阅读它的工作方式和原因。
更新
为什么它最后会这样包裹你 jsFiddle是因为连字符为浏览器提供了 soft wrap opportunity .您可以将它们替换为不间断的连字符 ‑ 或 ‑ 并且它应该再次按预期换行。您可以编写一些 JS 来捕获 contenteditable 元素上的每个按键，然后在按下连字符键时取消其正常行为，并插入不间断连字符而不是普通连字符
这是一个 jsFiddle .
关于html - div contenteditable 和 span 元素的自动换行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16474897/