css 中的省略号在 Firefox (16.0.2) 中有效，但在 Chrome (22.0.1229.94) 中无效答案

【问题标题】：ellipsis in css works in Firefox (16.0.2) but not in Chrome (22.0.1229.94)css 中的省略号在 Firefox (16.0.2) 中有效，但在 Chrome (22.0.1229.94) 中无效
【发布时间】：2012-11-25 13:13:25
【问题描述】：

我有以下html：

<div class="x">
    <div class="y" title="aaaaa">
        <a href="/">
            aaaaa
        </a>
    </div>
    <div class="y" title="bbbbbb">
        <a href="/">
           bbbbbb
        </a>
    </div>
    <div class="y" title="ccccc">
        <a href="/">
            ccccc
        </a>
    </div>
    <div class="y" title="dddddddd">
        <a href="/">
            dddddddd
        </a>
    </div>
</div>

用css：

.x{
    width: 10em;
    background-color: #FFB9B9;
    white-space: nowrap;
    overflow: hidden; 
    text-overflow: ellipsis;
}
.y {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    line-height: 18px;
    white-space: nowrap;    
    background-color: #E1CECE;
    display: inline-block;
}

你可以在这里看到：http://jsfiddle.net/fDBbm/

省略号从一开始就在 Firefox (16.0.2) 中有效，但在 Chrome (22.0.1229.94) 中无效。

【问题讨论】：

标签： google-chrome ellipsis css

【解决方案1】：

这是一个源于使用display:inline-block 和text-overflow: ellipsis 的错误。不幸的是，当配对/一起使用时，Chrome 无法正确处理这些属性。

这个bug是几个月前报告的：http://code.google.com/p/chromium/issues/detail?id=133700

【讨论】：

两年过去了，还是没修好。 GG谷歌。另外，请查看该问题 ID。

【解决方案2】：

作为一种解决方法，您可以使用 display:inline 而不是 display:inline-block;

FIDDLE

但是，这会导致单个 'y' 元素失去其背景颜色...

为了解决这个问题，我们可以添加：

.y:after {
    content: '';
    display: inline-block;
}

FIDDLE

现在它可以在 FF 和 Chrome（以及顺便说一句，IE）中运行。

【讨论】：