Proprietà CSS overflow-wrap
La proprietà CSS overflow-wrap specifica se si deve inserire un'interruzione di riga in una casella di riga. Descrizione, valori ed esempi.
La proprietà overflow-wrap indica al browser se è consentito spezzare una stringa normalmente non spezzabile — una parola lunga, un URL o un hash — su una nuova riga, in modo che il testo non fuoriesca dal proprio contenitore.
Normalmente, CSS inserisce interruzioni di riga solo in corrispondenza delle cosiddette "opportunità di a capo morbido", come spazi e trattini. Una singola stringa lunga priva di tali caratteri (supercalifragilisticexpialidocious o https://example.com/a/very/long/path) non ha alcun punto di a capo, quindi fuoriesce dalla sua casella. overflow-wrap consente di autorizzare un'interruzione all'interno di quella stringa come ultima risorsa.
Quando utilizzarla
Utilizza overflow-wrap quando il contenuto è generato dagli utenti o imprevedibile — commenti, query di ricerca, indirizzi email, link, identificatori di codice. Sono esattamente quelle stringhe che non hanno punti di interruzione naturali e possono far saltare una colonna di larghezza fissa, una card o un elemento flex. Una regola difensiva comune è:
.user-content {
overflow-wrap: break-word;
}Questo mantiene intatto il layout senza influenzare il testo normale, poiché l'interruzione si attiva solo quando una parola andrebbe altrimenti in overflow.
I valori in sintesi
La proprietà overflow-wrap ha tre valori significativi — normal, break-word e anywhere — oltre alle parole chiave CSS universali initial e inherit.
normal— valore predefinito. Le parole si spezzano solo nelle opportunità normali (spazi, trattini). Una parola troppo lunga va in overflow.break-word— una parola lunga si spezza in un punto arbitrario solo quando andrebbe altrimenti in overflow. In modo fondamentale, non riduce la larghezza intrinseca minima dell'elemento, quindi raramente disturba il resto del layout.anywhere— comebreak-word, ma l'opportunità di interruzione viene conteggiata quando il browser calcola la dimensione minima del contenuto dell'elemento, così un elemento flex o grid può restringersi oltre la sua parola più lunga.
overflow-wrap è il nome standard della più vecchia proprietà word-wrap. word-wrap è mantenuta come alias per la compatibilità con le versioni precedenti — accettano gli stessi valori e si comportano in modo identico. Usa overflow-wrap nel nuovo codice.
Overflow-wrap vs word-break
overflow-wrap e word-break influenzano entrambe il punto in cui le righe possono spezzarsi, ma rispondono a domande diverse.
overflow-wrapspezza una parola solo come ultima risorsa, quando andrebbe altrimenti in overflow, indipendentemente dalla lingua.word-breakcontrolla la spezzatura in modo proattivo. È pensata principalmente per le lingue CJK (cinese, giapponese, coreano) dove le interruzioni tra caratteri sono normali, e il suo valorebreak-allspezza le parole latine a livello di carattere anche quando potrebbero entrare nel contenitore.
Regola pratica: usa overflow-wrap: break-word per prevenire l'overflow senza alterare l'a capo normale; usa word-break: break-all solo quando vuoi effettivamente una spezzatura aggressiva a livello di carattere.
Per spezzare le parole ai confini delle sillabe con un trattino, vedi la proprietà hyphens; per controllare gli spazi bianchi e l'a capo in generale, vedi white-space.
Riepilogo della proprietà
| Valore iniziale | normal |
|---|---|
| Si applica a | Tutti gli elementi. |
| Ereditata | Sì. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.overflowWrap = "normal"; |
Sintassi
Sintassi CSS di overflow-wrap
overflow-wrap: normal | anywhere | break-word | initial | inherit;Nota che l'ordine dei valori delle parole chiave conta nelle dichiarazioni in stile abbreviato, ma per overflow-wrap si imposta semplicemente un valore alla volta.
Esempio della proprietà overflow-wrap
Ogni paragrafo di seguito è limitato a 200px. La lunga stringa dummydummy… non ha spazi, quindi con normal va in overflow, mentre break-word e anywhere la forzano ad andare a capo all'interno della casella.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
width: 200px;
margin: 3px;
background: #ccc;
}
.anywhere {
overflow-wrap: anywhere;
}
.break-word {
overflow-wrap: break-word;
}
.normal {
overflow-wrap: normal;
}
</style>
</head>
<body>
<h2>Overflow-wrap property example</h2>
<h3>Overflow-wrap: normal</h3>
<p>Lorem Ipsum has been the industry's standard <em class="normal"> dummydummydummydummydummydummydummydummy</em> text ever since the 1500s...
</p>
<h3>Overflow-wrap: anywhere</h3>
<p>Lorem Ipsum has been the industry's standard <em class="anywhere">dummydummydummydummydummydummydummydummy </em> text ever since the 1500s...
</p>
<h3>Overflow-wrap: break-word</h3>
<p>Lorem Ipsum has been the industry's standard <em class="break-word">dummydummydummydummydummydummydummydummy </em> text ever since the 1500s...
</p>
</body>
</html>Valori
| Valore | Descrizione |
|---|---|
| normal | Le righe si spezzeranno solo in base alle normali regole di interruzione di riga. Le parole non si spezzeranno anche se fuoriescono dal contenitore. Questo è il valore predefinito di questa proprietà. |
| anywhere | Le parole o gli URL lunghi si spezzeranno in qualsiasi punto se non ci sono punti di interruzione accettabili nella riga. I caratteri di sillabazione non sono considerati punti di interruzione accettabili, anche se la proprietà hyphens è impostata. |
| break-word | Le parole o stringhe lunghe che non rientrano nel contenitore si spezzeranno in un punto arbitrario per forzare un'interruzione di riga. Le opportunità di a capo morbido non vengono considerate nel calcolo della dimensione minima del contenuto dell'elemento. |
| initial | Imposta il valore predefinito della proprietà. |
| inherit | Eredita la proprietà dall'elemento padre. |