html - IE7 contentEditable 自动换行

标签 html internet-explorer internet-explorer-7 contenteditable

我有以下代码:

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

而且我需要 IE7(不需要 IE6,FF3.x 可以正常工作)来正确包装文本,如果我从 div 中删除 contentEditable="true",它就会这样做。只需在使用和不使用 contentEditable 的情况下尝试这段代码,您就会明白我的意思。使浏览器窗口足够小,以便您可以看到文本是如何换行的。

谢谢。

最佳答案

演示: http://jsbin.com/icavu4

试试这个可以帮助解决一点问题!

<!--[if gte IE 7]>
<style type="text/css">
.editable {
    overflow:hidden;
    float:left;
    height:20px;
    border: solid red 1px;
    background: yellow;
}
</style>
<![endif]-->

更新:

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!

关于html - IE7 contentEditable 自动换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1716836/

相关文章:

html - 为什么我的背景图片在 IE 中不显示,但在其他所有浏览器中都能正常显示?

javascript - 无法从 iframe 捕获父窗口中发生的错误

CSS 间距问题 - IE6/7

javascript - div/bold 包含文本给类

jquery - 如何模拟浏览器缩放

javascript - Json 对象属性仅在 IE8 中未定义

html - 修复 IE 中的 CSS 和其他问题

CSS/IE7 : The Case of the Extending Background-Image

HTML5/CSS - 扩展水平菜单

html - div、表格和框