back to top

Andare a capo con CSS: la proprietà word-wrap

Grazie a CSS3 è possibile forzare il ritorno a capo di una stringa anche in assenza di spaziature tra i caratteri. In altre parole, la nuova versione del linguaggio CSS consente di andare a capo anche quando ci sono parole (o, meglio dire, stringhe) troppo lunghe che, normalmente, causerebbero un’impossibilità per il testo di rispettare la dimensione del proprio box contenitore.

Nella precedente lezione abbiamo visto come gestire il tracimamento del testo mediante la proprietà text-overflow. I più attenti di voi avranno notato che, negli esempi, abbiamo utilizzato anche la proprietà white-space (CSS 1) per definire il modo in cui gestire il testo in presenza di "spazi bianchi". Con CSS3 il linguaggio ha fatto un passo in avanti consentendo allo sviluppatore di definire il comportamento del testo anche in "assenza di spazi". Cerchiamo di spiegare meglio.

Parole troppo lunghe?

Cosa succede quando un box contiene delle stringhe molto lunghe e prive di spazi – come avviene, ad esempio, con le URL – che non possono essere "mandate a capo"? Se il box ha una larghezza fissa orizzontale, le parole troppo lunghe escono dal bordo a destra del box con conseguenze anti-estetiche per il layout della pagina:

un testo che esce dai contorni di un box

Questo avviene, ovviamente, se non è stata impostata la proprietà overflow: hidden. Se è definita questa proprietà, infatti, tutto il testo che esce dai contorni del box viene tagliato.

un testo interrotto interrotto da overflow:hidden

Nessuna delle due soluzioni, tuttavia, è veramente soddisfacente. Ci sono molti casi in cui è meglio forzare il ritorno a capo delle parole troppo lunghe. Questo può avvenire grazie alla nuova proprietà word-wrap che, utilizzata col valore break-word, fa si che le parole eccessivamente lunghe vengano comunque spezzate su più righe per ragioni di spazio. Vediamo un esempio:

div.box {
  border: 2px solid;
  padding: 10px;
  width: 200px;
  word-wrap: break-word;
}

Il risultato, sebbene non perfetto, mi pare comunque migliore dei precedenti.

un testo con parole lunghe spezzate su più righe

Purtroppo non è possibile inserire un segno che indichi il ritorno a capo, il classico trattino (-) per intenderci.

Il valore di default di word-wrap è "normal" e corrisponde alla situazione normale in cui il testo viene mandato a capo solo in presenza di spazi.

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).