Question

我有一个设为可编辑的div

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

基本上我想模仿文本区域作为div的用法。我在现代浏览器中工作正常，但我需要它在IE8中工作。当我输入像abcdefghijklmnopqrstuvqxyzabcdefghijklmnopqrstuvqxyzabcdefghijklmnopqrstuvqxyz这样的长词时，IE8中发生了什么。当我应用overflow-x：none时，它会破坏可编辑div的边界并且div扩展或隐藏文本。这会导致div扩展

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

N.B。输入标准文本 - “猫与狗”将自动转到下一行。

提前致谢

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;
}

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

1 个答案: