div contenteditable和包装与span元素

Question

当我在contenteditable div中有span标签时，自动换行会改变。这是一个小提琴。 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标签如何，如何保持包装相同？

Answer 1

如果您想保留正常的换行符，可以将范围设置为display: inline-block;。

这是 jsFiddle 。

如果你不关心单词中间的断行，那么这个CSS就可以了。

div
{
    white-space: pre;
}

这是 jsFiddle 。

看看here，了解它的运作方式和原因。

<强>更新

它最后jsFiddle包裹它的方式是因为连字符为浏览器提供了soft wrap opportunity。您可以使用不间断的连字符‑或‑替换它们，它应该再次按预期包装。您可以编写一些JS来捕获contenteditable元素上的每个按键，然后在按下连字符键时取消其正常行为，并插入非断开连字符而不是正常的连字符

这是 jsFiddle 。