Firefox插入换行符在contenteditable

Question

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

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

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

但是当我添加一个<br>时，包装在打字时消失了，然后在div失去焦点后再回来。

例如

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

变为

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

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

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

Answer 1

我用一点点黑客修复了这个问题，所以对于任何一个搜索都是如此。

1-如果contenteditable的宽度为浮动，则Firefox在其div div和换行符中存在错误。

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

示例：

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

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

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

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

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

这个小黑客对我来说非常有用，而且由于调整大小的可能性很小，如果有的话，你的性能开销会很小。

希望这有帮助。

Answer 2

现在，您可以在内容可编辑的div上使用overflow-wrap: break-word;