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. Questa funzionalità è particolarmente utile quando si gestiscono testi non spezzabili come URL o stringhe di codice.
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 (CSS1) 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, causando un impatto negativo sul 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, creando però un effetto poco elegante:
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, ora chiamata overflow-wrap nei moderni standard CSS, che, utilizzata col valore break-word, fa sì che le parole eccessivamente lunghe vengano comunque spezzate su più righe per ragioni di spazio. Ecco un esempio pratico di codice:
div.box {
border: 2px solid;
padding: 10px;
width: 200px;
word-wrap: break-word; /* Utilizzare overflow-wrap nei moderni CSS */
}Il risultato, sebbene non perfetto, è sicuramente più ordinato rispetto ai precedenti metodi. Inoltre, fa sì che il contenuto rimanga all’interno dei confini del layout previsto, migliorando l’usabilità e l’aspetto estetico della pagina.
Purtroppo non è possibile inserire un segno che indichi il ritorno a capo, come il classico trattino (-), quando si utilizza word-wrap (o overflow-wrap). Tuttavia, è possibile stilizzare il testo in modo tale da mantenere una buona leggibilità e usabilità.
Il valore di default di word-wrap è “normal”, e corrisponde alla situazione in cui il testo viene mandato a capo solo in presenza di spazi. Consigliamo di utilizzare overflow-wrap: break-word quando si ritiene necessario gestire parole senza spazi in layout responsivi.
