FireFox text-overflow ellipsis hack 删除所有其他样式答案

【问题标题】：FireFox text-overflow ellipsis hack removes all other stylingFireFox text-overflow ellipsis hack 删除所有其他样式
【发布时间】：2011-02-19 07:30:46
【问题描述】：

我正在尝试在我的网站的 FireFox 版本中实现text-overflow: ellipsis; 支持。我在网上找到了 XUL hack 并将其应用于样式表，但我发现应用 hack 会从元素中删除所有其他样式。换句话说，我可以有省略号，也可以有背景图像、渐变、行高等。

如何让省略号技巧与我的其他样式一起使用？

【问题讨论】：

破解方法是什么 — 链接？它可能会添加额外的元素，这可能会改变其他 CSS 规则的解释方式。
这是我正在使用的 hack：rikkertkoppes.com/thoughts/2008/6

标签： html css firefox ellipsis

【解决方案1】：

试试这个

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;

这适用于 IE 7、IE 8、IE 9、IE 10、Firefox、Chrome、Safari

【讨论】：

【解决方案2】：

在元素周围放置一个额外的 div，并为其提供所有背景和字体，然后在子元素上设置 text-overflow。

【讨论】：

几天前尝试过，遇到了一个问题，即 div（或 span）会换行到下一行，并且不会像它应该的那样位于图标的右侧.