Question

我有以下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）中没有。

Answer 1

这是因使用display:inline-block和text-overflow: ellipsis而导致的错误。不幸的是，当配对/使用时，Chrome无法正确处理属性。

几个月前报告了这个错误：http://code.google.com/p/chromium/issues/detail?id=133700

Answer 2

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

<强> FIDDLE

然而，这会导致个人“＆”。要失去背景色的元素......

所以要修复我们可以添加：

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

<强> FIDDLE

现在它在FF和Chrome（以及BTW，IE）中工作。

css中的省略号适用于Firefox（16.0.2），但不适用于Chrome（22.0.1229.94）

2 个答案: