在Opera和IE中使用text-overflow: ellipsis;不起作用

Question

我试图在我的输入框中使用text-overflow：ellipsis，但只有Chrome和Firefox可以正常显示。在IE和Opera中它没有任何效果。是否有任何hack解决方法...

Fiddle：http://jsfiddle.net/SZYFw/

input {
    text-overflow: ellipsis
}

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

Opera版本：12.11 Build 1661 IE版本：10

​

- karanba

---

没有代码，就很难！ - Praveen Kumar Purushothaman

你能分享你的代码以及IE和Opera浏览器的版本信息吗？ - Kasun

Answer 1

我可以使用带有所有兼容性的DIV 这里 使其工作，但是不幸的是，看看对于input元素这里它说了什么...

Opera的兼容性：

-o-text-overflow: ellipsis;

还可以查看这个链接。我认为它不支持Opera和IE浏览器...但是正如你所看到的，其余部分都完美运行！

- Sonhja

Answer 2

根据 CSS基础UI 草案，text-overflow“指定内联内容溢出其块容器时的渲染方式”，但是 input 元素没有内容；它有一个值，该值会被显示，但是该值不是元素内容。

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

- Jukka K. Korpela

---

我使用输入元素来显示项目名称，就像Windows文件夹名称一样，并希望用户可以进行编辑，并且如果名称被剪切，则想要显示省略号。 - karanba

@karanba，那么为什么需要省略号呢？如果您认为它确实需要，可以设置一个带有contenteditable属性的div元素，并在提交表单时（通过onsubmit处理程序）将其内容复制到隐藏字段中。 - Jukka K. Korpela

我认为没有办法使用input:text字段来完成这个任务。我将尝试在视图时使用div或span，当用户单击它进行更改时，突然将其更改为文本..就像@Jukka K. Korpela提供的建议一样。 - karanba

Answer 3

假设你没有代码，省略号不起作用。

看看你的代码是否与这个匹配：

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;

代码示例: http://jsfiddle.net/4mmQm/

这段代码在IE 7、IE 8、IE 9、IE 10、Firefox和Chrome中都可以正常运行。

- Praveen Kumar Purushothaman

---

问题涉及“输入”。你的代码使用的是“span”标签。将其改为使用“input”标签后，在IE浏览器上无法工作：http://jsfiddle.net/FgyYb/ - Jukka K. Korpela

不确定为什么这个答案没有得到太多关注。我一直在努力让省略号在IE（8＆9）上正常工作，但一直缺少word-wrap：normal。网络上的所有其他答案/博客都给出了在IE上并不真正有效的答案。虽然有些晚了，但还是谢谢。 - David Karam

@DavidKaram 非常感谢，伙计，希望有所帮助！ :) - Praveen Kumar Purushothaman

@Praveen，很高兴听到这个消息，但这不是问题。 - danorton

理论上，text-overflow: ellipsis; 是你需要的。然而，在IE中，这对于input元素不起作用，这就是这个问题所涉及的内容，也是这个答案没有回答的内容。 - Cerbrus