【问题标题】: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)会换行到下一行,并且不会像它应该的那样位于图标的右侧.
    猜你喜欢
    • 2014-03-18
    • 1970-01-01
    • 1970-01-01
    • 2010-12-28
    • 1970-01-01
    • 2013-01-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多