html - div contenteditable and word-wrapping with span elements -

when have span tags in contenteditable div word wrapping changes. here 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 keep word wrapping same regardless of html tags?

if want preserve normal line breaks can set span display: inline-block;.

here's jsfiddle.

this bit of css trick if don't care lines breaking in middle of word:

div {     white-space: pre; } 

here's jsfiddle.

have here read on how , why works way does.

update

the reason why wraps way in last jsfiddle because hyphens provide browser soft wrap opportunity. replace non-breaking hyphen ‑ or ‑ , should wrap expected again. write js capture every keypress on contenteditable element, cancels normal behaviour if hyphen key pressed, , inserts non-breaking hyphen instead of normal hyphen

here's jsfiddle.