Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

IE7 contentEditable word wrapping

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.

like image 462
Iker Jimenez Avatar asked Nov 11 '09 17:11

Iker Jimenez


People also ask

What is the function of contenteditable attribute?

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.

What is the use of contenteditable in HTML?

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.

What is content editable?

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>


1 Answers

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!

like image 175
Luca Filosofi Avatar answered Sep 24 '22 03:09

Luca Filosofi