CSS3 permette di definire come si deve comportare 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 il testo deve occupare uno spazio fisico ben delimitato, quando cioè si sceglie di impedire che il box contenitore si espanda lateralmente e/o verso il basso per offrire tutto la spazio necessario ai contenuti da esso ospitati. Questa situazione si verifica quando il contenitore ha dimensioni precise e gestisce il tracimamento dei contenuti (overflow) nascondendo l’eventuale abbondanza.
Mettiamo alla prova la proprietà text-overflow con il codice che segue:
.box {
border: 2px solid;
padding: 10px;
width: 500px;
overflow: hidden;
<span style="color:#FF0000">text-overflow: ellipsis;</span>
white-space: nowrap;
}Il risultato che si ottiene è quello della figura che segue
Come potete notare il testo è tagliato e gli ultimi caratteri visibili sono tre puntini di sospensione.
Se volete usare un elemento di sospensione personalizzato, dovete modificare 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
