Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Tutto sull'elemento <pre>

Link copiato negli appunti

Avendo a disposizione tante e ottime soluzioni per la formattazione del codice potrebbe esserci da parte nostra la tentazione di dimenticare le basi. E le basi, nel caso in questione, sono rappresentate da un uso corretto dell'elemento HTML pre.

Su Perishable Press è stato pubblicato un bel tutorial che mostra le varie opzioni di cui disponiamo per formattare al meglio questo elemento con i CSS.

Le opzioni presentate sono tre:

  1. l'uso di width per evitare spiacevoli effetti sul layout in presenza di righe troppo lunghe grazie alla barra di scorrimento orizzontale;
  2. l'uso di proprietà  CSS come white-space e word-wrap per evitare la comparsa della barra orizzontale facendo sì che righe troppo lunghe vengano spezzate automaticamente;
  3. la possibilità  di espandere in larghezza il box con il testo preformattato in conseguenza dell'hover sul box stesso da parte dell'utente.

La seconda soluzione, anche se non ottenuta con i CSS, è quella adottata, tra gli altri, su A List Apart. Nella terza mi sono imbattuto qualche volta recentemente, verificando che spesso l'autoespansione del box è ottenuta con l'ausilio di jQuery o altri script. Tutto sommato mi pare che la prima sia quella più semplice ed efficace, una barra orizzontale in questi casi non disturba. Quale dei tre approcci preferite?

Ti consigliamo anche