back to top

Text-overflow: gestire l’overflow dei contenuti con CSS3

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

un testo interrotto coi puntini di sospensione

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

un testo interrotto con un elemento di sospensione personalizzate
Pubblicità
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).