La disposizione di testi in spazi angusti può essere causa di preoccupazione se abbiamo parole molto lunghe. Immaginiamo di avere un guestbook con i messaggi degli utenti disposti in maniera diversa dal classico standard (un commento sotto l'altro) ed impaginati a coppie:

Ciao a tutti, l'evento di ieri è stato suuuuuuperfantasticoooooooooooooooooo!!! Troppo bello

Sono tornato dopo un mese e siete sempre più bravi. Congratulazioni e a presto

 

Se qualche utente particolarmente "esuberante" inserisse commenti con parole quali "bellissimooooooo" o "ciao a tuttiiiiiiii" (come vediamo nell'esempio) saremmo costretti a prendere contromisure quali:

  • "overflow:auto;" per mostrare le scrollbar in caso di testo eccedente
  • script js per controllare le parole eccedenti una determinata lunghezza e spezzarle in parti

per contenere e mostrare correttamente il testo troppo lungo.

Ad oggi invece, tramite la proprietà word-wrap, è possibile spezzare automaticamente il testo che eccede lo spazio a sua disposizione. Questa proprietà era stata ideata ed introdotta da Internet Explorer ed è poi stata ripresa nelle specifiche CSS3; al momento è una delle poche proprietà supportate da tutti i browser.

Basterà assegnare la proprietà "word-wrap:break-word;" ad un elemento contenitore (in questo caso ad entrambi i DIV) per ottenere l'effetto seguente:

Ciao a tutti, l'evento di ieri è stato suuuuuuperfantasticoooooooooooooooooo!!! Troppo bello

Sono tornato dopo un mese e siete sempre più bravi. Congratulazioni e a presto

 

Utilizzare il valore di default "word-wrap:normal" equivale a non indicare affatto la proprietà, a meno di necessità di sovrascrittura di un precedente ed ereditato "word-wrap:break-word".