Auslassungszeichen in css Arbeiten in Firefox (Live 16.0.2), aber nicht in Chrome (22.0.1229.94)

Question

Ich habe folgende 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> 

mit 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; 
} 

dem Du siehe hier: http://jsfiddle.net/fDBbm/

Die Auslassungszeichen funktionierten von Anfang an in Firefox (16.0.2), aber nicht in Chrome (22.0.1229.94).

Answer 1

Dies ist ein Fehler, der von der Verwendung von display:inline-block und text-overflow: ellipsis herrührt. Leider behandelt Chrome die Eigenschaften nicht korrekt, wenn sie zusammen gepaart/verwendet werden.

Der Fehler wurde vor ein paar Monaten berichtet: http://code.google.com/p/chromium/issues/detail?id=133700

Answer 2

Als Abhilfe können Sie display:inline statt display:inline-block;

FIDDLE

Allerdings nutzen könnten, verursacht dies die einzelnen 'y' Elemente verlieren ihre Hintergrundfarbe ...

So zu beheben, dass wir hinzufügen könnten:

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

FIDDLE

Jetzt arbeitet es in FF und Chrome (und BTW, IE als auch).