Proprietà CSS word-break
Usa la proprietà CSS word-break per specificare dove interrompere le righe. Scopri la proprietà e prova gli esempi.
La proprietà CSS word-break controlla come le parole vengono spezzate quando il testo raggiunge il bordo del suo contenitore. Determina se il browser è autorizzato a dividere una parola tra i caratteri per evitare che contenuti lunghi e non suddivisibili vadano in overflow.
Per impostazione predefinita, le interruzioni di riga avvengono solo in corrispondenza delle "opportunità di a capo morbido" — spazi, trattini e punti di interruzione simili. Una singola stringa lunga senza spazi (una URL, un hash, un identificatore lungo) non verrà interrotta e fuoriuscirà dal suo riquadro. Impostare word-break: break-all indica al browser che può interrompere la riga in qualsiasi carattere, così il testo va a capo invece di fuoriuscire.
Questo è particolarmente utile per:
- URL lunghe, percorsi di file o indirizzi email all'interno di colonne strette.
- Contenuti generati dagli utenti in cui non è possibile prevedere la lunghezza delle parole.
- Testo misto CJK (cinese / giapponese / coreano) e latino, dove il comportamento di interruzione differisce tra i sistemi di scrittura.
word-break è strettamente correlata a overflow-wrap (precedentemente word-wrap) e a white-space. La differenza fondamentale: overflow-wrap: anywhere interrompe una parola solo quando andrebbe altrimenti in overflow, mentre word-break: break-all interrompe in modo aggressivo a ogni riga, anche quando era disponibile un normale punto di interruzione. Preferire overflow-wrap nei casi ordinari "impedisci a questa URL di andare in overflow" e usare word-break quando si vuole specificamente un'interruzione a livello di carattere.
Questa proprietà fa parte delle proprietà CSS3.
| Valore iniziale | normal |
|---|---|
| Si applica a | Tutti gli elementi. |
| Ereditata | Sì. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.wordBreak = "break-all"; |
Sintassi
Valori CSS word-break
word-break: normal | break-all | keep-all | break-word | initial | inherit;Esempio della proprietà word-break:
Esempio di codice CSS word-break
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
html,
body {
height: 100%;
}
body {
font-family: Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
background-color: #8ebf42;
}
p {
word-break: break-all;
line-height: 1;
text-transform: uppercase;
text-align: center;
font-size: 30px;
font-weight: bold;
color: #eee;
width: 1em;
}
</style>
</head>
<body>
<p>element</p>
</body>
</html>Risultato
Nell'esempio precedente, il <p> è largo solo 1em, quindi ogni lettera va a capo sulla propria riga — una chiara dimostrazione di break-all che ignora i normali punti di interruzione.
Esempio della proprietà word-break con il valore "break-all":
Esempio di codice CSS word-break break-all
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
font-size: 0.95em;
line-height: 1.5;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {
margin: 50px auto;
max-width: 700px;
}
.text {
padding: 20px;
background-color: #666;
color: white;
text-align: justify;
}
.break {
word-break: break-all;
}
strong {
background-color: #000;
}
</style>
</head>
<body>
<h2>Word-break property example</h2>
<div class="container">
<h3>Text breaks inside words</h3>
<p class="text break">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem <strong>Ipsum</strong> has been the industry's standard dummy text ever since the 1500s, when an <strong>unknown</strong> printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, <strong>remaining</strong> essentially unchanged.
</p>
</div>
</body>
</html>Valori
| Valore | Descrizione |
|---|---|
| normal | Utilizza le regole di interruzione di riga predefinite. Questo è il valore predefinito della proprietà. |
| break-all | Interrompe tra qualsiasi coppia di caratteri, indipendentemente dall'overflow. Questo può rendere il testo difficile da leggere. |
| keep-all | Le interruzioni di parola non devono essere usate per il testo cinese/giapponese/coreano (CJK). Il comportamento del testo non-CJK è lo stesso di normal. |
| break-word | Deprecato. Interrompe le parole in punti arbitrari se non ci sono punti di interruzione accettabili nella riga. Usare overflow-wrap: anywhere al suo posto. |
| initial | Fa sì che la proprietà utilizzi il suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento padre. |
Suggerimenti e insidie comuni
break-allriduce la leggibilità. Poiché può dividere una parola in qualsiasi carattere, il testo normale diventa difficile da leggere. Usarlo solo quando il contenuto non è prosa (codici, hash, URL) o quando si vuole davvero che ogni riga sia riempita fino al bordo.- Preferire
overflow-wrapper "impedire semplicemente l'overflow". Se l'unico obiettivo è evitare che una URL lunga rompa il layout,overflow-wrap: break-wordmantiene intatte le parole normali e interrompe solo quella problematica. break-wordè deprecato. Il valorebreak-worddiword-breakè legacy e si comporta comeoverflow-wrap: anywherecombinato conword-break: normal. Non usarlo nel nuovo codice — impostareoverflow-wrap: anywhereal suo posto.keep-allè per il testo CJK. Impedisce le interruzioni all'interno delle parole cinesi, giapponesi e coreane. Il testo latino viene trattato comenormal, quindi non ha alcun effetto visibile sul contenuto in italiano.- Combinare con
hyphensper una prosa più elegante. Quando si vuole che le parole lunghe vadano a capo in punti sensati con un trattino, abbinareoverflow-wrapconhyphensinvece di forzarebreak-all.
Supporto browser
word-break è supportata in tutti i browser moderni. I valori normal, break-all e keep-all sono ampiamente disponibili; il valore legacy break-word è supportato per compatibilità con le versioni precedenti ma dovrebbe essere evitato.