Proprietà CSS hyphens
Usa la proprietà CSS hyphens per controllare la sillabazione delle parole. Valori, esempi e dettagli pratici.
La proprietà CSS hyphens controlla come le parole vengono spezzate con i trattini quando il testo va a capo su una nuova riga. La sillabazione consiste nel dividere una parola lunga in un punto adeguato e nell'aggiungere un trattino (-) a fine riga, così il testo riempie le colonne strette in modo più uniforme, evitando grandi spazi vuoti o il rischio che una parola lunga fuoriesca dal contenitore.
Questa pagina tratta i tre valori accettati dalla proprietà (none, manual e auto), il ruolo dell'attributo lang, i caratteri di trattino morbido e duro che puoi inserire manualmente, e la relazione tra hyphens e le altre proprietà di interruzione del testo.
Perché e quando usare hyphens
La sillabazione è più importante nei contenitori stretti — barre laterali, layout mobile, testo su più colonne o qualsiasi elemento con una width ridotta. Senza di essa, una singola parola non interrompibile (un URL lungo, un nome chimico, un termine composto tedesco) può superare il bordo del suo contenitore o causare un bordo destro irregolare con spazi bianchi imbarazzanti. Attivare hyphens: auto permette al browser di spezzare queste parole in punti validi e mantiene il testo giustificato o stretto visivamente ordinato.
Di solito si usa hyphens insieme a text-align: justify, oppure quando il contenuto è generato dall'utente e non è possibile prevedere la lunghezza delle parole.
hyphens: auto funziona solo quando la lingua dell'elemento è nota. Impostala con l'attributo lang (ad esempio <html lang="en">), perché il browser ha bisogno del dizionario di sillabazione della lingua per decidere dove sono consentite le interruzioni. Senza lang, auto si comporta come manual.
Le regole di sillabazione non sono definite esplicitamente nelle specifiche, quindi i punti di interruzione esatti possono variare da browser a browser.
| Valore iniziale | none |
|---|---|
| Si applica a | Tutti gli elementi. |
| Ereditabile | Sì. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | Object.style.hyphens = "none"; |
Sintassi
Sintassi della proprietà CSS hyphens
hyphens: none | manual | auto | initial | inherit;Esempio della proprietà hyphens:
Esempio della proprietà CSS hyphens con i valori none, manual e auto
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
width: 55px;
border: 1px solid #666;
}
p.none {
hyphens: none;
}
p.manual {
hyphens: manual;
}
p.auto {
hyphens: auto;
}
</style>
</head>
<body>
<h2>Hyphens property example</h2>
<h3>none</h3>
<p class="none">An extreme­ly lengthy sentence</p>
<h3>manual</h3>
<p class="manual">An extreme­ly lengthy sentence</p>
<h3>auto</h3>
<p class="auto" lang="en">An extreme­ly lengthy sentence</p>
</body>
</html>Risultato
Nell'esempio sono inclusi tutti e tre i valori per mostrarne le differenze.
I prefissi browser non sono più necessari per i browser moderni.
Opportunità di interruzione di riga
Grazie ai due caratteri Unicode riportati di seguito è possibile definire manualmente i potenziali punti di interruzione di riga all'interno del testo:
U+00AD (SHY/Trattino morbido)
Questo carattere viene reso in modo invisibile. Indica un punto in cui il browser deve spezzare la parola nel caso in cui sia necessaria la sillabazione. Per inserire il trattino morbido usa .
U+2010 (HYPHEN/Trattino duro)
Questo carattere indica una possibilità di interruzione di riga visibile. Il trattino viene visualizzato anche nel caso in cui la riga non venga interrotta in quel punto.
Valori
| Valore | Descrizione |
|---|---|
| none | Nessuna sillabazione. Le parole non vengono spezzate alle interruzioni di riga, anche se i caratteri suggeriscono punti di interruzione. |
| manual | Le parole vengono spezzate solo per l'a-capo dove esistono opportunità di interruzione all'interno della parola. Le parole vengono sillabate solo in corrispondenza di ‐ o ­. |
| auto | Il browser spezza automaticamente le parole nei punti di sillabazione appropriati. Le parole vengono sillabate dove lo decide l'algoritmo. Il comportamento del valore auto dipende dalla lingua. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento padre. |
Proprietà correlate per l'interruzione del testo
hyphens è una delle diverse proprietà CSS che determinano dove e come il testo può andare a capo. Vengono spesso usate in combinazione:
- overflow-wrap — consente al browser di spezzare una parola lunga solo quando altrimenti supererebbe il bordo del contenitore, senza inserire un trattino.
- word-break — controlla se le parole possono essere spezzate tra qualsiasi carattere (utile per testo CJK o stringhe lunghe).
- word-wrap — l'alias legacy di
overflow-wrap. - white-space — determina se le sequenze di spazi bianchi vengono compresse e se il testo va a capo.
- line-break — affina le regole di interruzione di riga, principalmente per le lingue asiatiche.
Usa hyphens per aggiungere trattini nei punti di interruzione validi, e overflow-wrap / word-break come rete di sicurezza per le stringhe prive di punti di sillabazione validi.
Supporto dei browser
hyphens: auto è supportato in tutti i browser moderni. Le versioni più vecchie di Safari e le versioni precedenti a Chromium di Edge richiedevano prefissi vendor (-webkit-hyphens, -ms-hyphens), ma questi non sono più necessari per i browser attuali.