0

我使用的是 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 个元素添加省略号。

4

1 回答 1

1

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

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

于 2013-08-14T04:53:09.540 回答