Sembra incredibile, ma quello che molti considerano il browser migliore del mondo difettava della proprietà word-wrap nella definizione dei CSS. Tale direttiva permette di gestire una singola parola che risulti strabordante rispetto alla larghezza dell’elemento in cui questa è contenuta.
In sostanza, se scrivo su un livello largo 70px la parola supercalifragilistichespiralitoso, settando una dimensione del testo a 12px, verosimilmente il contenuto del livello andrà oltre i 70px in larghezza. La proprietà word-wrap mi permette di decidere come gestire tale eventualità.
Vediamo un esempio concreto:
<div style="border: 1px inset #ccc; background:#f1f1f1; margin: 10px auto; word-wrap: break-word; width: 70px;">supercalifragilistichespiralitoso</div>
Finalmente anche Firefox decide di mandare a capo le lettere di troppo rispetto alla larghezza del livello. La proprietà ha sempre funzionato a dovere in Internet Explorer e nei browser basati su WebKit (Safari, Chrome, Epiphany, etc…)
Funzionava a dovere in Internet Explorer per il semplice motivo che l'hanno inventata loro, solo in un secondo momento è stata aggiunta nelle specifiche CSS3.
Considerato nel complesso lo scarso supporto dei browser a CSS3, non mi stracciavo le vesti per questa mancanza di Firefox 😉
Ma nemmeno io mi straccio le vesti, però è una proprietà molto importante proprio ora che gli editor on line rappresentano gran parte dei contenuti web.