Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Word-wrap

Gestire il comportamento del browser di fronte al testo eccedente la larghezza di un box
Gestire il comportamento del browser di fronte al testo eccedente la larghezza di un box
Link copiato negli appunti

Il modulo CSS Text dei CSS3 è ricchissimo di novità destinate ad una gestione ancora più dettagliata del testo presente in una pagina web. Sono novità che vanno ad arricchire l'insieme delle proprietà destinate a questo scopo nei CSS 2, per le quali rimandiamo alle lezioni Gestione del testo: proprietà di base e Gestione del testo: proprietà avanzate della nostra Guida CSS di base.

Purtroppo, al momento in cui pubblichiamo questa guida ai CSS3, il supporto nei browser per la stragrande maggioranza delle nuove proprietà è pressoché nullo.

L'unica di queste proprietà a godere di un supporto esteso è word-wrap.

Cosa fa, come funziona

La proprietà word-wrap era stata introdotta da Microsoft sin dalla versione 5.5 di Internet Explorer. Successivamente è stata assorbita nelle specifiche CSS del W3C.

La sua utilità si esplica in una situazione ben precisa: un box a larghezza fissa in cui siano presenti parole molte lunghe.

Cosa succede secondo il comportamento standard dei browser? Vediamolo nel primo esempio. Ecco il codice CSS:

#box {
width: 200px;
padding: 10px;
border: 1px solid black;
background: #999;
}

Figura 1 - Box senza word-wrap
screenshot

Come si evince dallo screenshot, la parola segue il suo flusso ed esce dai limiti del box.

Ora modifichiamo il codice CSS aggiungendo la proprietà word-wrap con il valore break-word (esempio):

#box {
width: 200px;
padding: 10px;
border: 1px solid black;
background: #999;
word-wrap: break-word;
}

Figura 2 - Box con word-wrap
screenshot

La parola viene spezzata e prosegue sulla riga successiva.

Manca qualcosa? In effetti sì. Non si tratta, è evidente, di un a capo regolare, perché manca il tratto di unione che a fine riga segnala che quella parola è stata spezzata in due parti. Per la gestione dell'a capo i CSS3 prevedono apposite proprietà, al momento non supportate e per certi versi di difficile implementazione per via delle diversità che da lingua a lingua caratterizzano questo aspetto della grammatica.

Tabella del supporto sui browser

Font e testo Internet Explorer Firefox Safari Google Chrome Opera
word-wrap 5.5+ 3.5+ 1.0+ 1.0+ 10.5+

Ti consigliamo anche