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

Question

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

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

基本上我想模仿将文本区域用作 div。我让它在现代浏览器中运行良好，但我需要它在 IE8 中运行。当我输入一个长短语（如abcdefghijklmnopqrstuvqxyzabcdefghijklmnopqrstuvqxyzabcdefghijklmnopqrstuvqxyz. 它突破了可编辑 div 的边界，当我应用 overflow-x: none 时，div 会扩展或文本被隐藏。这会导致 div 展开

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

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

提前致谢

Answer 1

有一个简单的 css 属性可以做到这一点：溢出包装。尽管几乎所有浏览器仍然将其实现为“自动换行”（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;
}