HTML pre: conservare gli spazi e gestire le righe lunghe
HTML <pre> segna una regione di testo preformattato che conserva spazi e interruzioni di linea. Combinalo con <code> per il codice sorgente e usa CSS white-space: pre-wrap quando le righe lunghe devono adattarsi alla larghezza disponibile.
Differenza tra pre e paragrafi normali
I paragrafi normali combinano spazi consecutivi e interruzioni di riga nella fonte secondo il CSS predefinito. Il tag pre mantiene questo spazio di default, rendendolo adatto per codice con indentazione, log e testi dove è importante mantenere la spaziatura. Il font predefinito è solitamente monospaziato, ma i font e la gestione dello spazio possono essere modificati con il CSS.
È possibile allineare visualizzazioni simili a tabelle usando gli spazi, ma ciò non fornisce le effettive relazioni di righe e colonne di una tabella. Usa table per dati comparativi e, quando trasmetti significato con spaziatura come in arte ASCII, fornisci spiegazioni comprensibili anche dai lettori di schermo.
Esempio completo: preservare gli spazi e gestire le righe lunghe
Salva il seguente documento come pre-demo.html e aprilo in un browser. Salva il file in UTF-8 e non sono necessarie librerie esterne. Lo scorrimento orizzontale e la gestione del ritorno a capo sono stati applicati separatamente alla stessa lunga stringa.
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Confrontare spazi e interruzioni di riga con pre</title>
<style>
body { max-width: 40rem; margin: 1rem auto; padding: 0 1rem; }
pre { padding: 1rem; background: #eef2f4; }
.scroll { overflow-x: auto; }
.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
</style>
</head>
<body>
<h1>Spazi e interruzioni di riga</h1>
<p>one two
three</p>
<pre>one two
three</pre>
<h2>Scorrimento orizzontale</h2>
<pre class="scroll"><code>path/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</code></pre>
<h2>A capo automatico</h2>
<pre class="wrap"><code>path/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</code></pre>
<h2>Mostrare il sorgente HTML</h2>
<pre class="scroll"><code><p>Hello & welcome</p></code></pre>
</body>
</html>Il primo paragrafo si fonde in una sola riga secondo la gestione predefinita degli spazi, e il pre seguente conserva i quattro spazi tra le parole one e two e i quattro spazi prima della parola three. Quando lo schermo si restringe, l'esempio con scorrimento ottiene lo scorrimento orizzontale, e l'esempio con ritorno a capo spezza anche le parole lunghe sulla riga successiva. Nell'area di visualizzazione del codice sorgente HTML, <p>Hello & welcome</p> appare come testo in forma di tag.
L'HTML all'interno di pre è anch'esso interpretato.
Pre non è un elemento che impedisce l'interpretazione dell'HTML. Se scrivi un vero tag <strong> al suo interno, viene applicato il significato del tag. Per visualizzare il codice sorgente HTML come testo, esegui l'escape di < in < e & in &. L'ultimo esempio dell'intero documento sopra utilizza questo principio.
La prima interruzione di riga immediatamente dopo il tag di avvio pre viene rimossa dal parser HTML. Le interruzioni di riga successive e l'indentazione nel codice sono preservate, quindi verifica la posizione effettiva di inizio del testo per assicurarti che gli spazi per l'allineamento del documento non compaiano sullo schermo. Durante la visualizzazione dinamica del codice, puoi inserire la stringa utilizzando textContent invece di innerHTML per evitare che venga interpretata come tag.
Cose da verificare quando la suddivisione automatica della riga non avviene
Se specifichi solo overflow-wrap e mantieni il valore predefinito white-space: pre, le interruzioni di riga desiderate potrebbero non apparire. Per preservare gli spazi e le interruzioni di riga durante il ritorno a capo alla fine dello schermo, applica pre-wrap, e per suddividere stringhe lunghe senza spazi, specifica anche overflow-wrap. Al contrario, se hai bisogno di mantenere una struttura a singola riga per il codice, mantieni pre e fornisci uno scorrimento interno con overflow-x: auto.
pre preserva il layout del testo, e code indica che il contenuto è codice. Usarli insieme non genera automaticamente evidenziazione della sintassi, ed è necessario un evidenziatore o un CSS separato. Anziché fare affidamento sulle vecchi attributi width e wrap, regola la visualizzazione con CSS. Per maggiori dettagli, consulta alle definizioni di pre nello standard standard HTML: elemento pre e nel documento riferimento MDN per pre.
