省略号在 Firefox 中效果不佳，但在 chrome 中有效答案

【问题标题】：Ellipsis not working well in firefox but works in chrome省略号在 Firefox 中效果不佳，但在 chrome 中有效
【发布时间】：2013-01-16 11:08:58
【问题描述】：

我试图使用省略号将链接限制为宽度。

html 是这样的：

<a class="blueLink2 destination-url-space" style="top:0;" href="http://google.com/uyv245">http://google.com/iuh345345345gthrthrthrth</a>

CSS 是

.blueLink2 {
    color: #0051A1;
    display: inline;
    font-size: 14px;
    margin-left: 5px;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    top: 0;
}
.destination-url-space {
    display: inline-block;
    max-width: 200px;
    overflow-x: hidden;
}

但它只适用于 Chrome。不能在 Firefox 中工作。演示：http://jsfiddle.net/xE6HG/

【问题讨论】：

标签： html css ellipsis

【解决方案1】：

您需要在此处添加white-space: nowrap;

DEMO

【讨论】：

【解决方案2】：

p{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  -moz-binding: url('ellipsis.xml#ellipsis');
}

<p>
Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. 
</p>

<p>
Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. 
</p>

【讨论】：