Text-overflow: gestire l'overflow del testo
CSS3 permette di definire come si comporta un testo quando non ha abbastanza spazio nel box che lo contiene. Ciò è possibile grazie alla proprietà text-overflow.
Questa proprietà può assumere tre valori:
- clip: il testo viene tagliato;
- ellipsis: vengono mostrati i puntini di sospensione dove avviene il taglio del testo;
- string: viene mostrato un testo specifico per indicare il taglio.
Naturalmente, questa proprietà funziona correttamente quando si sceglie di impedire che il box che contiene il testo si espanda lateralmente e/o verso il basso.
Mettiamo alla prova la proprietà text-overflow con il codice che segue:
.box {
border: 2px solid;
width: 500px;
padding: 10px;
margin: 10px;
float: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}Il risultato che si ottiene è quello della figura che segue
Se volete usare un elemento di sospensione personalizzato, dovete correggere la proprietà text-overflow come segue
text-overflow: " (continua)";Notate che, dato che il separatore personalizzato è una stringa, questa va posta fra virgolette.
Il risultato è questo
