Tu sei qui: Home » Css

Stile Testo Preformattato

Quando si devono pubblicare dei listati di codice inseriti all'interno del tag pre c'è la possibilità di rovinare il layout del sito a causa di righe molto lunghe. Tramite CSS si può fare in modo che l'elemento pre mantenga una larghezza fissa e permetta la visione delle righe lunghe tramite una barra di scroll orizzontale.

È necessario impostare una larghezza (nell'esempio width: 90%) altrimenti Internet Explorer fa casino.

pre {
  width: 90%;
  overflow: auto;
  height: auto;
}

Sempre per Internet Explorer è necessario forzare la visualizzazione della barra di scorrimento con:

pre {
  overflow-x: scroll;
}

Nota: la proprietà overflow-x non è ammessa e impedirà la validazione del foglio di stile. Se si vuole far validare il CSS bisogna mettere questa regola in un foglio di stile separato da includere con i commenti condizionali, per esempio:

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

Non è meglio una textarea?

No. Pubblicare del codice all'interno di una textarea è male per due motivi:

  1. il tag pre è fatto apposta per pubblicare testo preformattato come il codice;
  2. una textarea ha bisogno di essere dimensionata anche verticalmente, con la possibile presenza anche di una barra di scorrimento verticale nel caso il testo sia lungo, mentre la soluzione del tag pre si adatta al testo.