Question

I have a div which is set to be editable

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

Basically I want to mimic the use of a text area as a div. I have it working fine in modern browsers but I need it to work in IE8. What is happening in IE8 when I enter a long phrase like abcdefghijklmnopqrstuvqxyzabcdefghijklmnopqrstuvqxyzabcdefghijklmnopqrstuvqxyz. It breaches the boundaries of the editable div and the div expands or the text is hidden when I apply overflow-x: none. This then causes the div to expand

Is there a way in jquery to detect the overflow and then chop the long phrase down so it stays inside the widths of the div?

N.B. Entering standard text – “A cat and a dog” will automatically go to the next line.

Thanks in advance

Answer 1

There’s a simple css-property that does this: overflow-wrap. Though almost all browsers still have it implemented as ‘word-wrap’ ( http://caniuse.com/wordwrap )

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

demo: http://jsfiddle.net/THC5q/4/

html:

<div>
    ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>​

css:

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