Proprietà CSS line-break
Usa la proprietà CSS line-break per specificare dove il testo deve andare a capo. Definizione, valori ed esempi.
La proprietà CSS line-break controlla come vengono spezzate le righe nel testo in cinese, giapponese e coreano (CJK) quando l'interruzione cade vicino a punteggiatura o simboli. Gli script CJK vanno a capo in modo diverso dal testo latino: non ci sono spazi tra le parole, quindi una riga può interrompersi quasi ovunque tra i caratteri. Il problema riguarda quali caratteri possono iniziare o terminare una riga. Determinati segni di punteggiatura — come i kana piccoli (ぁ, ゃ), i segni di iterazione o le parentesi di chiusura — non dovrebbero essere lasciati isolati all'inizio di una riga, e line-break stabilisce quanto rigorosamente il browser applica queste convenzioni.
Questa proprietà influenza solo il testo CJK. Non ha effetti visibili su testo latino, cirillico o altri script separati da spazi; per quelli si usano solitamente word-break, overflow-wrap o hyphens.
Quando usarla
Ricorri a line-break quando stai componendo contenuto CJK e hai bisogno di un controllo preciso sui punti di andata a capo:
strict— per layout formali o simili alla stampa, dove si vogliono le regole di interruzione più conservative e restrittive.normal/loose— per colonne strette (schermi mobile, barre laterali) dove interrompere su più caratteri evita overflow indesiderati.auto— lascia che il browser scelga un valore predefinito appropriato. È quello che si ottiene se non si imposta mai la proprietà.
Se il testo non è CJK, questa proprietà non ha alcun effetto utile — consulta le proprietà correlate sopra.
| Valore iniziale | auto |
|---|---|
| Si applica a | Tutti gli elementi, ma solo ai contenitori a blocco. |
| Ereditata | Sì. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.lineBreak = "loose"; |
Sintassi
Sintassi della proprietà CSS line-break
line-break: auto | loose | normal | strict | anywhere | initial | inherit;Il valore anywhere è più recente e indica al browser che è consentita un'interruzione tra qualsiasi coppia di caratteri tipografici, inclusi prima e dopo la punteggiatura — utile all'interno di contenitori molto stretti a larghezza fissa. Il supporto browser per anywhere è più limitato rispetto agli altri valori, quindi verificare prima di farvi affidamento.
Esempi
Il valore strict
Con strict, il browser applica il set di regole CJK più restrittivo per l'interruzione di riga, mantenendo la punteggiatura legata ai caratteri adiacenti.
<!DOCTYPE html>
<html>
<head>
<style>
.korean {
line-break: strict;
}
</style>
</head>
<body>
<h2>Line-break property example</h2>
<!--Be the change you want to see in the world.-->
<span class="korean">세상에서 보고싶은 변화가 있다면 당신 스스로 그 변화가 되어라.</span>
</body>
</html>Risultato
Il valore normal
Con normal, il browser usa le regole predefinite meno restrittive, quindi lo stesso testo può andare a capo in più punti. È utile quando una colonna è stretta e strict causerebbe overflow.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 16px;
line-height: 24px;
line-break: normal;
}
</style>
</head>
<body>
<h2>Line-break property example</h2>
<p>日本語のテキスト例です。行の折り返し位置を確認します。日本語のテキスト例です。行の折り返し位置を確認します。日本語のテキスト例です。行の折り返し位置を確認します。</p>
</body>
</html>Valori
| Valore | Descrizione |
|---|---|
| auto | Spezza il testo usando la regola predefinita del browser per l'interruzione di riga. È il valore iniziale della proprietà. |
| loose | Usa le regole di interruzione di riga più permissive. Comunemente usato per righe brevi, come nelle colonne in stile giornale. |
| normal | Usa le regole di interruzione di riga più comuni. |
| strict | Usa le regole di interruzione di riga più restrittive, mantenendo la punteggiatura legata ai caratteri adiacenti. |
| anywhere | È consentita un'interruzione tra qualsiasi coppia di caratteri tipografici. Supporto browser limitato. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita il valore della proprietà dall'elemento genitore. |
Supporto browser
Le parole chiave auto, loose, normal e strict sono supportate in tutti i browser moderni. La parola chiave anywhere è più recente e non ancora supportata ovunque, quindi è consigliabile fornire un fallback (ad esempio overflow-wrap: break-word) quando la si utilizza.
Proprietà correlate
word-break— controlla se le parole possono essere spezzate a metà, incluso per testo CJK e non CJK.overflow-wrap— permette alle stringhe lunghe non interrompibili di andare a capo per evitare overflow.hyphens— aggiunge la sillabazione per le lingue che la utilizzano.white-space— controlla come vengono gestiti gli spazi bianchi e l'andata a capo in generale.