Question

我正在使用firefox版本23＆amp;当文本溢出时，有3个元素应该显示省略号。这适用于chrome但在mozilla firefox中只有一个元素显示省略号。请检查下面的jsfiddle。

这是我的HTML代码

    <h1 class="title2" >Course  11111111111111111111111111111111111111111111111111111111 2222222222222222221111111111111111111111</h1>
<h1 class="title1" >Unit  11111111111111111111111111111111111111111111111111111 22222222222222221111111111111111111111111</h1>
<h2 class="title2" >Assignment 111111111111111111111111111111111111111111111111111111111111111111111111111111</h2>

这是我的css代码

    h1.title1 {
    font: 12px/0px 'proximanovaRegular', Arial, sans-serif;
    margin: 12px 12px 12px 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding: 10px;
    width:200px;
}

h1.title2 {
    font: 12px/0px 'proximanovaRegular', Arial, sans-serif;
    margin: 12px 12px 12px 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding: 10px;
    width:200px;
}

h2.title2 {
    font: 34px/15px 'akzidenz-grotesk_bq_condensMd', Arial, sans-serif;
    margin: 12px 12px 12px 20px;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px #1d6a9c, 2px 2px 0px #1d6a9c;

        text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding: 10px;
    width:200px;
}

http://jsfiddle.net/gaurav14u/ELyHW/5/ 如果我打开运行这个jsfiddle in chrome然后它可以工作，但在ff中它不会为前2个元素添加省略号。

Answer 1

请为您的font css规则添加1px行高（例如font: 12px/1px），这应该可以解决Firefox中的问题。

（注意：这只是一个解决方案，我不知道为什么它在Chrome / Opera中有效但在FireFox中无效。如果我找到了，我会更新答案原因。）

只有firefox的省略号问题

1 个答案: