I have the following code:
<html>
<style type="text/css">
DIV { display:inline; border: solid red 1px; }
.editable { background:yellow; }
</style>
<div class="editable" contentEditable="true"> This is test text. This is test text.This is test text.This is test text.This is test text.Thihis is test text.This is test text.</div>
<div class="editable" contentEditable="true"> short </div>
<div class="editable" contentEditable="true"> This is test text.This is test text.This is test text.his is test text.Thihis is test text.Thihis is test text.Thihis is test text.Thi </div>
And I need IE7 (IE6 not needed and FF3.x works fine) to wrap the text correctly, which it does if I remove the contentEditable="true" from the divs. Just try this code with and without contentEditable and you'll see what I mean. Make the browser window small enough so you see how the text wraps.
Thanks.
The contenteditable global attribute is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing.
The contenteditable attribute specifies whether the content of an element is editable or not. Note: When the contenteditable attribute is not set on an element, the element will inherit it from its parent.
contenteditable is an HTML attribute that you can add to any HTML element. If its value is true or an empty string, that means that the user can edit it by clicking the element. For example: <div contenteditable="true"> Change me! </ div>
DEMO: http://jsbin.com/icavu4
try this can help solve a little the problem!
<!--[if gte IE 7]>
<style type="text/css">
.editable {
overflow:hidden;
float:left;
height:20px;
border: solid red 1px;
background: yellow;
}
</style>
<![endif]-->
UPDATED:
Since this can be considered a workaround in part, it allow you to display it like FF but it cut of last part of the text, you may want provide the full text to edit on hover by using a little bit of javascript!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With