Tutto sull’elemento <pre>
Mercoledì 11 Novembre 2009 - 08:38
di Cesare Lamanna
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:
- l’uso di
widthper evitare spiacevoli effetti sul layout in presenza di righe troppo lunghe grazie alla barra di scorrimento orizzontale; - l’uso di proprietà CSS come
white-spaceeword-wrapper evitare la comparsa della barra orizzontale facendo sì che righe troppo lunghe vengano spezzate automaticamente; - 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?
Commenti
1
Per il codice non andrebbe utilizzato il tag code?
2
Mattia, la differenza tra pre e code la puoi rintracciare da questo stesso post: code serve in genere a evidenziare porzioni da formattare come codice comprese nel testo (osserva width o white-space nel post), pre è per blocchi di codice
# - postato da Cesare Lamanna - 11 Novembre 2009 - 17:09
3
tag definisce il testo preformattato.
http://www.w3schools.com/TAGS/.....ag_pre.asp
non necessariamente codice, invece di scrivere
un testo qualsiasi un altro test un testo qualsiasi un altro test un testo qualsiasi un altro test un testo qualsiasi un altro test un testo qualsiasi un altro test
basta scrivere
un testo qualsiasi un altro test
un testo qualsiasi un altro test
un testo qualsiasi un altro testil risultato è uguale ma con meno html tags
# - postato da Avasilcai Daniel - 11 Novembre 2009 - 21:26
4
volevo scrivere questo:
p un testo qualsiasi un altro test br/ un testo qualsiasi un altro test br/ un testo qualsiasi un altro test br/ un testo qualsiasi un altro test br/ un testo qualsiasi un altro test br/ /p
basta scrivere
pre un testo qualsiasi un altro test
un testo qualsiasi un altro test
un testo qualsiasi un altro test
/pre
il risultato è uguale ma con meno html tags# - postato da Avasilcai Daniel - 11 Novembre 2009 - 21:28