Firefox insert line break in contenteditable

I have a contentediatble div, it's parent div has a floating width of 50%, now what want is to make the contenteditable to have a max width of the container, even if text spans, so I used this

.editable-content {
  display: block;
  min-height: 10px;
  word-wrap: break-word;
  word-break: break-all;
}

This works great in Chrome, but when I try in fire fox and the word is big, it does break into a new line,

But when I add a <br> the wrapping is gone while typing, and then its back after the div loses focus.

example

-------------------------------------------------------

becomes

--------------------------------------
-----------------

but when I add a <br> element in that div anywhere, the wrapping is gone while the user is typing in the div, then when the div loses focus its back to normal.

What could be the problem here? I want the content editable to have a fixed width.

Solution

I fixed that with a little hack, so for any one searching.

1- Firefox has a bug in its contenteditable divs and line breaks if the width of the div is float.

2- To fix it you need to put a fixed width to the div using javascript after it has been initialized with its float width:

example:

div.css("max-width",div.width());

3- But this will make you lose the float width thing when the window is resized, you then listen to window resizes and remove the fixed width property and make it again float

div.css("max-width","50%");

4- and then again when resizing stops, you set the width again,

div.css("max-width",div.width());

This little hack worked quite good for me, and since the chanced of resizing are little, you will have really small performance overhead, if at all.

Hope this helps.