Il contenuto racchiuso nei tag <pre></pre> potrebbe non essere automaticamente responsive e quindi in alcuni casi potrebbe “sfondare”. Vediamo come risolvere questo problema utilizzando un paio di proprietà CSS.
Un problema che vedo spesso su altri siti di tutorial è che i lunghi frammenti di codice (racchiusi appunto da tag pre) superano la larghezza della pagina e causano lo sfondamento del layout della pagina.
Ciò accade perché per impostazione predefinita i tag pre hanno la proprietà CSS white-space impostata su normal, in questo modo:
/* Con questa impostazione il contenuto non è responsive! */
pre {
white-space: normal;
}Per risolvere il problema è sufficiente modificarli in pre-wrap:
pre {
white-space: pre-wrap;
}Questo è un miglioramento, ma non risolve completamente il problema dell’overflow, perché pre-wrap riguarda solo stringhe lunghe ma separate da spazio.
Cosa succederebbe se ci fosse una stringa intera così lunga da superare la larghezza della pagina? Il layout si romperebbe ancora, perché pre-wrap non affronta le singole parole.
Un buon esempio è un path, che può essere potenzialmente molto lungo e non ha spazi. È possibile che risulti troppo largo per molti layout, soprattutto sui dispositivi mobile. Ecco un esempio:
/var/data/www/vhosts/d/e/devdev.it/pub/httpdocs/wp-content/themes/devdev/immagini
Poiché non c’è spazio tra le parole nella riga sopra, verrà considerata come una lunga stringa Se fosse stato separato da spazi tra ogni parola, sarebbe andato a capo perfettamente grazie alla proprietà pre-wrap di cui abbiamo parlato prima.
Per risolvere questo problema, aggiungiamo un’altra proprietà CSS al tag <pre>, chiamata word-break, e le diamo il valore break-all:
pre {
white-space: pre-wrap;
word-break: break-all;
}
Fatto, ora i nostri tag pre sono reattivi al 100%.
