div contenteditable和带有span元素的自动换行

Question

When I have span tags in a contenteditable div the word wrapping changes. Here is a 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>

How do I keep the word wrapping the same regardless of the html tags?

Answer 1

If you want to preserve the normal line breaks you can set the span to display: inline-block; .

Here's a jsFiddle .

This bit of CSS does the trick if you don't care about lines breaking in the middle of a word:

div
{
    white-space: pre;
}

Here's a jsFiddle .

Have a look here to read up on how and why it works the way it does.

Update

The reason why it wraps the way it does in you last jsFiddle is because the hyphens provide the browser with a soft wrap opportunity . You could replace those with a non-breaking hyphen ‑ or ‑ and it should wrap the as expected again. You could write some JS that would capture every keypress on the contenteditable element, then cancels its normal behaviour if the hyphen key is pressed, and inserts the non-breaking hyphen instead of the normal hyphen

Here's a jsFiddle .