Wie div auf einer Zeile zu halten und Ellipsen anfügen

Question

Gibt es eine Möglichkeit in CSS, um sicherzustellen, dass ein div oder eine Klasse nur eine Textzeile ist, und wenn es überläuft, fügen Sie Ellipsen daran an? Ich weiß, dass Sie die div/Klasse auf eine bestimmte Höhe und overflow:hidden setzen können, aber es sieht seltsam aus für das, was ich versuche zu tun.

Im Bild unten sehen Sie, dass das div auf der rechten Seite größer ist als das auf der linken Seite. Wenn ich den Namen des Songs eine Zeile mit Ellipsen machen kann, haben beide die gleiche Höhe. Wer weiß, wie man das erreicht? P.S. Ich möchte einen besseren Weg, als etwas wie $song = substr(0, 10, $song) in PHP zu tun ... etwas hoffentlich möglich mit CSS.

Answer 1

1. Legen Sie eine Breite auf dem Container fest.
2. Stellen Sie den Leerraum ein: nowrap.
3. Textüberlauf: Ellipse.
4. Ausblenden der Überlauf *

Demo: http://jsfiddle.net/jD99d/

.my-class-name { 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    width: 100px; 
    overflow: hidden; 
} 

https://developer.mozilla.org/en-US/docs/CSS/text-overflow

^{* Siehe Hinweis, dass „Diese CSS-Eigenschaft nicht einen Überlauf zwingt auftreten, so zu tun, und Damit der Text-Überlauf angewendet werden kann, muss der Autor einige zusätzliche Eigenschaften auf das Element anwenden, z.}