Wrap delle righe di testo preformattato in html

Un problema introdotto dalla pubblicazione del codice è stato quello della possibilità che le righe di codice sorgente fossero troppo lunghe per la dimensione della colonna del blog in cui vengono visualizzate. Dal momento che vengono visualizzate all'interno di tag <pre> </pre> la loro lunghezza effettiva viene rispettata nel rendering da parte del browser e finiscono per creare difetti nella grafica della pagina.

La soluzione più elegante che sono riuscito a trovare è quella di introdurre, nel css, alcuni particolari valori per le proprietà white-space e word-wrap dell'elemento pre.

 div.source pre {
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap !important; /* 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+ */
}

Pubblicato da Silvano Sartore, venerdì 28 novembre 2008, nella categoria programmazione.