Paolo De Feo
a- a+

Andare a capo: gestione testo con CSS3 e word-wrap

Vediamo come si utilizza la proprietà CSS3 word-wrap. Codice ed esempio

La proprietà CSS3 word-wrap consente di troncare contenuti testuali più lunghi del normale che potrebbero “sconfinare” oltre gli spazi di layout a loro disposizione. In pratica, word-wrap capisce quali sono le parole con lunghezza eccessiva e di uso non convenzionale (come “un grandissimissimo superciaoooooo”):  agisce quindi per “spezzarle” e distribuirle in modo uniforme sulle varie linee di paragrafo.

La proprietà CSS3 word-wrap è supportata da tutti i maggiori browser, Internet Explorer incluso, ed opera attraverso 2 valori principali: “normal” e “break-word”. Il valore “normal” in realtà non apporta alcuna modifica o restrizione al markup, ma lascia tutto come prima.

Per spezzare le parole useremo il valore “break-word”. Come funziona? L’utilizzo è semplice: basta associarlo ad un elemento pagina desiderato, come un div o un paragrafo, per avere il risultato di text break desiderato.

Facciamo un piccolo esempio: permettiamo di inviare del testo accapo tramite CSS3.

Il markup CSS

Nel markup di seguito assoceremo il valore CSS3 “break-word” ad una classe testuale di paragrafo.

p.test
{
width:11em; 
border:1px solid #000000;
word-wrap:break-word;
}

Il markup HTML

Il markup HTML avrà il classico aspetto di contenitore testuale:

<p class="test"> Questo testo contiene una parola lunghissima: thisisaveryveryveryveryveryverylongword. Questa parola verrà spezzata e distribuita sulla prossima linea di paragrafo.</p>

Grazie al valore associato “break-word” potremo apprezzare il seguente risultato:

Senza il predetto attributo, il testo nel paragrafo sarebbe apparso in questo modo:

La proprietà CSS3 word-wrap rappresenta dunque un rapido metodo per la gestione del testo, permettendo una formattazione finale uniforme e senza sbavature.



Ti potrebbe interessare anche

commenta la notizia

Ci sono 1 commenti