省略號在Firefox的CSS作品（16.0.2），但在Chrome（22.0.1229.94）

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' 的元素失去他們的背景顏色...

所以要解決，我們可以添加：

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

FIDDLE

現在，它的工作在FF和Chrome（和BTW，IE以及）。