Come mantenere div su una riga e aggiungere ellissi

Question

C'è un modo in css per assicurarsi che un div o una classe sia solo una riga di testo, e se viene eseguito sopra, aggiungere i puntini di sospensione su di esso? So che è possibile impostare la classe/div a una certa altezza e overflow:hidden, ma sembra strano per quello che sto cercando di fare.

Nell'immagine in basso si vede che il div a destra è più grande di quello a sinistra. Se riesco a rendere il nome della canzone una linea con ellissi, avranno entrambe la stessa altezza. Qualcuno sa come realizzare questo? Post scriptum Voglio un modo migliore di fare qualcosa come $song = substr(0, 10, $song) in PHP ... qualcosa si spera possibile con i CSS.

Answer 1

1. Impostare una larghezza sul contenitore.
2. Imposta spazio bianco: nowrap.
3. Imposta overflow del testo: puntini di sospensione.
4. Nascondere l'overflow *

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

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

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

^{* Si noti che "Questa proprietà CSS non forza un overflow che si verificherà; in tal senso e per applicare l'overflow del testo, l'autore deve applicare alcune proprietà aggiuntive sull'elemento, ad esempio l'impostazione dell'overflow su hidden. "}