Firefox插入换行符在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

我有一个contentediatble div,它的父div有50%的浮动宽度,现在想要的是使contenteditable有一个容器的最大宽度,即使文本跨越,所以我用这个

.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,

这在Chrome中效果很好,但是当我尝试使用火狐并且这个词很大时,它确实会突破新的一行,

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

但是当我添加一个
时,包装在打字时消失了,然后在div失去焦点后再返回。

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.

但是当我在任何地方的div中添加一个
元素时,当用户输入div时,包装就会消失,然后当div失去焦点时它会恢复正常。

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

这可能是什么问题?我希望内容可编辑具有固定的宽度。

2 个解决方案

#1

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.

1-如果div的宽度是浮动的,Firefox在其可信的div和换行符中有一个错误。

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:

2-要修复它,你需要在用它的浮动宽度初始化之后使用javascript为div添加一个固定的宽度:

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

3-但这会让你在调整窗口大小时丢失浮动宽度的东西,然后你听窗口调整大小并删除固定的宽度属性然后再次浮动

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

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

4-然后再次调整大小时,再次设置宽度,

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.

希望这可以帮助。

#2

Now you can use overflow-wrap: break-word; on contenteditable div

现在你可以使用overflow-wrap:break-word;在contenteditable div

#1