Funktioniert der CSS-Textüberlauf: Ellipse auf Anchor-Tags?

Question

Warum funktioniert das folgende CSS nicht?

a { 
    width: 60px; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
} 

Answer 1

Es ist, weil Anker als Standard sind, inline Elemente. Wenn Sie display:inline-block hinzufügen, wird der obige Code funktionieren.

Answer 2

Es ist für Box-Modell ist, wird display:block den Job

a { 
    width: 60px; 
    display:block; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
}​ 

Aber es können auch andere Probleme verursachen, den Anker (Inline-Element) verhalten sich wie Box-Modell Element zu machen (Anzeige: Block).

Referenz:text-overflow

Update:

display:inline-block 

Demo.

Answer 3

hinzufügen display: block zu Ihrem CSS.