div contenteditable и word-wrapping с элементами span

Question

Когда у меня есть теги span в contenteditable div, меняется перенос слов. Вот скрипка. 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, чтобы узнать, как и почему он работает так, как он делает.

Update

Причина, почему это оборачивает так, как это делает в вас последний jsFiddle потому, что черточки обеспечивают браузер с soft wrap opportunity. Вы можете заменить их дефрагментами ‑ или ‑, и он должен снова обернуть, как и ожидалось. Вы могли бы написать некоторые JS, которые захватывают все нажатие на contenteditable элемент, а затем отменяет его нормальное поведение, если клавиша дефис нажата, и вставляет неразрывный дефис вместо нормального дефис

Вот jsFiddle.