Tu sei qui: Home » Css

Mandare a capo il testo preformattato

Quando si deve pubblicare del codice è necessario racchiuderlo fra il tag <pre> per preservare le indentazioni e i ritorni a capo. Questo ha come effetto indesiderato la disabilitazione del wrapping, ovvero il ritorno a capo automatico del testo quando raggiunge il limite del contenitore. 

Senza wrapping le linee di codice molto lunghe rendono necessario lo scrolling orizzontale della pagina e possono rovinare il layout del sito. Applicando la seguente regola nel CSS si obbliga anche il testo preformattato ad andare a capo.

/* Browser specific (not valid) styles to make preformatted text wrap */
pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Nota: Purtroppo non sono regole legali e non faranno più validare il foglio di stile.

Fonte: myy.helia.fi/~karte/pre-wrap-css3-mozilla-opera-ie.html