Firefox 在 contenteditable 中插入换行符答案

【问题标题】：Firefox insert line break in contenteditableFirefox 在 contenteditable 中插入换行符
【发布时间】：2018-09-12 17:38:58
【问题描述】：

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

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

这在 Chrome 中效果很好，但是当我在 firefox 中尝试并且单词很大时，它确实会换行，

但是当我添加 <br> 时，输入时包装消失了，然后在 div 失去焦点后又返回。

例子

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

变成

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

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

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

我用一个小技巧解决了这个问题，所以任何人都可以搜索。

1- Firefox 在其contenteditable divs 中有一个错误，如果div 的宽度是浮动的，则会换行。

2- 要修复它，您需要在使用 javascript 使用其浮动宽度初始化 div 后为其设置固定宽度：

示例：

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

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

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

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

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

这个小技巧对我来说效果很好，而且由于调整大小的机会很小，所以性能开销非常小，如果有的话。

希望这会有所帮助。

【讨论】：