Tutto sull'elemento <pre>

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?