CSS3 per troncare il testo in eccesso

Spesso può capitare, per motivi di layout, di voler troncare delle porzioni di testo, affinché queste rimangano su una singola riga in una larghezza ben definita. Il modo più rude per farlo è impostare la proprietà  overflow a hidden. La soluzione funziona, anche su tutti i browser, ma è abbastanza rudimentale, un modo più "gentile" per farlo consisterebbe nell'apporre alla stringa troncata dei puntini sospensivi (ellipsis in inglese).

Una cosa del genere è possibile realizzarla con i CSS3 e la proprietà  text-overflow, vediamo un esempio:

• Elemento 1
• Elemento 2, questo è molto lungo e verrà  tagliato con text-overflow.
• Elemento 3

E questo è il codice CSS:

ul {
width: 150px;
}

li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

I browser che non supportano CSS3 troncheranno la stringa senza mostrare i puntini sospensivi, così come avverrebbe se settassimo semplicemente la proprietà  overflow a hidden.