jquery - 防止可编辑内容 div 水平增长

Question

我有一个设置为可编辑的div

<div class=".textarea_mask" contenteditable ></div>

基本上我想模仿将文本区域用作 div。我让它在现代浏览器中工作正常，但我需要它在 IE8 中工作。当我输入像 abcdefghijklmnopqrstuvqxyzabcdefghijklmnopqrstuvqxyzabcdefghijklmnopqrstuvqxyz 这样的长短语时，IE8 会发生什么。当我应用 overflow-x: none 时，它​​违反了可编辑 div 的边界并且 div 扩展或文本被隐藏。然后这会导致 div 展开

在 jquery 中有没有一种方法可以检测溢出，然后将长短语切下来，使其保持在 div 的宽度之内？

注意输入标准文本 - “A cat and a dog”将自动转到下一行。

提前致谢

Answer 1

有一个简单的 css 属性可以做到这一点:overflow-wrap。尽管几乎所有浏览器仍将其实现为“自动换行”(http://caniuse.com/wordwrap)

MDN:https://developer.mozilla.org/en-US/docs/CSS/word-wrap

演示:http://jsfiddle.net/THC5q/4/

html:

<div>
    ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>​

CSS:

div {
    width: 200px;
    background-color: #ff0;
    word-wrap: break-word;
}