Link copiato negli appunti
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
overflow
hidden
