html - 如何防止 IE 内容可编辑 div 中的自动换行？

Question

问题

我有一个 div，它的 contenteditable 设置为 true。在 Chrome 中，当输入时到达 div 的边缘时，它会将整个单词按预期移动到下一行。我展示了 Exhibit A:

IE 和往常一样，没有按预期运行。当在输入时到达 div 的边缘时，它会打断单词。我展示了 Exhibit B:

HTML

一个简单的 div，contenteditable 设置为 true:

<div id='bioEntryContainer' contenteditable='true' class='form-control'></div>

CSS

form-control 来自 Twitter 的 Bootstrap CSS。自定义样式是:

#bioEntryContainer { min-height:74px; overflow:auto; }

尝试修复

我用 CSS 尝试了以下方法，但没有成功:

overflow:hidden;
overflow-x:hidden;
white-space:nowrap;
white-space:pre;
display:inline-block; 

我已经尝试了 this question 中建议的路线，但它没有用。还有其他建议吗？

更新

我创建了一个 fiddle演示问题，但我无法在那里重新创建它。我包含了 Bootstrap CSS 以使其尽可能接近实际环境。

div 是用 JS 添加到 Bootstrap Modal 中的。我不确定这会如何改变事情，但希望这能提供更多背景信息。

Answer 1

到目前为止，您尝试过哪些 IE 版本？

我已经在 IE 9-11 中试过了，没有出现这样的问题。

尝试设置

word-wrap:break-word;

在您的 CSS 样式中。