La hyphensproprietà controlla la sillabazione del testo negli elementi a livello di blocco. È possibile impedire del tutto la sillabazione, consentirla o consentirla solo quando sono presenti determinati caratteri.
Nota che hyphensdipende dalla lingua. La sua capacità di trovare opportunità di interruzione dipende dalla lingua, definita langnell'attributo di un elemento genitore. Non tutte le lingue sono ancora supportate e il supporto dipende dal browser specifico.
Sintassi
p ( hyphens: none | manual | auto )trattini: nessuno
Le parole non sono mai sillabate nelle interruzioni di riga, anche se i caratteri all'interno della parola suggeriscono dove potrebbe o dovrebbe andare la sillabazione.
trattini: manuale
Le parole vengono interrotte solo nelle interruzioni di riga in cui sono presenti caratteri all'interno della parola che suggeriscono opportunità di interruzione di riga. Ci sono due caratteri che suggeriscono l'opportunità di interruzione di riga:
U+2010(TRATTINO): il trattino "duro" indica un'opportunità di interruzione di riga visibile. Anche se la linea non è effettivamente interrotta in quel punto, il trattino viene comunque visualizzato. Letteralmente un "-".U+00AD(TIMIDO): un trattino invisibile e "morbido". Questo personaggio non è reso visibilmente; invece, suggerisce un luogo in cui il browser potrebbe scegliere di spezzare la parola se necessario. In HTML, puoi usare-per inserire un trattino morbido.
trattini: auto
Le parole possono essere spezzate nei punti di sillabazione appropriati come determinato dai caratteri di sillabazione (vedi sopra) all'interno della parola o come determinato automaticamente da una risorsa di sillabazione appropriata alla lingua (se supportata dal browser o fornita tramite @hyphenation-resource).
I caratteri di sillabazione condizionale all'interno di una parola, se presenti, hanno la priorità sulle risorse automatiche quando si determinano i punti di sillabazione all'interno della parola.
trattini: tutti
Deprecato, non utilizzare . Questo era solo temporaneamente nelle specifiche per il test.
Demo
La demo qui sotto ha una serie di paragrafi e tutto è impostato hyphens: auto;per dimostrare il concetto di sillabazione. L' langattributo è impostato ensull'elemento genitore.
Supporto browser
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5.1 * |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 4.2-4.3 * |
Safari 5+ richiede -webkit-, Firefox 6+ richiede -moz-, IE 10+ richiede -ms-, iOS 4.2+ richiede -webkit-.
Chrome <55 e il browser Android supportano effettivamente -webkit-hyphens: none, che è il valore predefinito, ma nessuno degli altri valori.
In Firefox e Internet Explorer, la sillabazione automatica funziona solo per alcune lingue (definite con l' langattributo). Vedi questa nota per un elenco completo delle lingue supportate.
Se stai scrivendo un documento basato sul Web che necessita davvero di sillabazione, puoi utilizzare Hyphenator.js, una libreria basata su un vasto dizionario che inserirà automaticamente trattini morbidi e spazi di larghezza zero nel tuo contenuto.
Senza JavaScript, dovrai fare affidamento su entrambi hyphense word-wrap:
.hyphenate ( word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; )