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