css - 输入文本溢出：省略号；对于 Opera 和 IE 不起作用

Question

我正在尝试使用 text-overflow: ellipsis 作为我的输入，但只有 chrome 和 Firefox 显示它很好。在 IE 和 Opera 上它没有任何效果。有没有破解..

小提琴：http: //jsfiddle.net/SZYFw/

input {
    text-overflow: ellipsis
}

<pre>
   <input type="text" value="Lorem ipsum dolor sit amet, consectetuer adipiscing elit.">​
</pre>

歌剧版本：12.11 Build 1661 即版本：10

​</p>

Answer 1

我可以使它与具有所有兼容性的 DIV一起工作，但是，不幸的是，在这里查看它对输入元素的说明...

Opera 的兼容性：

-o-text-overflow: ellipsis;

另请参阅此链接。我认为 Opera 和 IE 不支持它......但正如你所看到的，其余的都很完美！

Answer 2

在我起草的CSS Basic Utext-overflow中， “指定内联内容溢出其块容器时的渲染”。但是一个input元素没有内容；它有一个值，显示出来，但该值不是元素内容。

为了考虑解决方法，请指定使用省略号作为输入文本的上下文和目的。如果需要，自动水平滚动值的正常实现input type=text，并且可以期望用户看到他到达输入框的末尾。

Answer 3

Assuming you have no code, ellipsis doesn't work.

See if your code matches to this:

display: inline-block;
*display: inline;
*zoom: 1;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
word-wrap: normal;
max-width: 130px;
vertical-align: bottom;

Fiddle: http://jsfiddle.net/4mmQm/

This works in IE 7, IE 8, IE 9, IE 10, Firefox, Chrome