{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 放荡不羁爱自由 的问题《IE7 contentEditable word wrapping》','https://www.manongdao.com/q-618111.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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.
dear friend, all versions of IE have some disadvantages. specially in parsing style sheets. for each version sytle rule have to modified. i suggest , you must use style rule for each version. ie. IE style hacks. from my knowledge , IE 6 version is best in all version of IE. it displays correctly what you write in style sheets.
Have you tried the overflow property?
Short Answer: If you use
display:inline-blockinstead ofdisplay:inline, then all the other browsers will behave like IE!Detail: IE9 behaves the same way. SPAN behaves the same as
DIV {display: inline}, which it should. Pumbaa80's Sep 1 response is the best one. Basically, ContentEditable must be rectangular in IE. So both SPAN and your DIV render asdisplay:inline-blockin IE. I use ContentEditable all the time in a content management system. I take advantage of the "feature" so that the user has some space to work with when the editable DIV is initially empty. In your example, if you delete all the text in "short", then good luck getting the cursor back into the element to put text back in. It just collapses down to nothing. In the CMS I toggle ContentEditable off and on, depending on if the user has selected Edit or Preview mode. At the same time, I toggle display between inline and block/inline-block, and I toggle the edit guides (your red border) off and on. ...TomO my! IE Developer Toolbar reveals that
contentEditabletriggers the infamouslayoutpropertyWhile there are several hacks out there forcing a
layout, I think there's no way to actually remove it. :(Have you tried to use a SPAN instead of an DIV?
SPAN-tags are inline, without the need of display:inline.
Sorry, that I didn't tried, but I don't have any IE7, at this moment.
Why don't you use
display: blockfor the divs?You could even use
inline-blockif they really need to be inline:http://www.brunildo.org/test/InlineBlockLayout.html Do note that according to quirksmode the support in IE 6 and 7 is incomplete for this
Exapmles: http://jsfiddle.net/SNzBn/