html - 仅适用于 Firefox 的省略号问题

Question

我使用的是 firefox 版本 23 & 有 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/ 如果我在 chrome 中打开运行这个 jsfiddle 然后它工作但在 ff 中它不会为前 2 个元素添加省略号。

Answer 1

请将 1px line-height 添加到您的 font css 规则(如 font: 12px/1px)，这应该可以解决 Firefox 中的问题。

(注意:这只是一个变通解决方案，我不知道为什么它在 Chrome/Opera 中有效，但在 FireFox 中无效。如果我设法找出答案，我会更新答案原因。)