In molte lingue scritte, è possibile inserire interruzioni di riga tra le sillabe e tra le parole. Spesso questo viene fatto per poter inserire più caratteri su una riga di testo, con l'obiettivo di avere meno righe in un'area di testo e risparmiare spazio. In queste lingue, l'interruzione è indicata visivamente con un trattino ('-').
Il modulo di testo CSS di livello 3 definisce una proprietà di trattini per controllare quando vengono mostrati agli utenti e il loro comportamento quando vengono visualizzati. A partire dalla versione 55, Chrome implementa la proprietà trattini.
Secondo la specifica, la proprietà trattini ha tre valori: none, manual
e auto. Per spiegare meglio, dobbiamo utilizzare un apostrofo morbido (­) come nell'esempio seguente.
Google ipsum dolor sit amet, consectetur adipiscing e­lit.
Un apostrofo morbido viene visualizzato solo se si trova nel margine
di riga. Il modo in cui viene visualizzato questo trattino in Chrome 55 o versioni successive dipende dal valore della proprietà CSS hypens.
-webkit-hyphens: manual;
hyphens: manual;
La combinazione di questi elementi produce un risultato come questo:
Tieni presente che l'apostrofo non è visibile. In tutti i casi, quando una parola contenente il trattino morbido si adatta a una singola riga, il trattino sarà invisibile. Ora vediamo come si comportano tutti e tre i valori del trattino.
Nessuno
Nel primo esempio, la proprietà trattini è impostata su none. In questo modo, il trattino medio non verrà mai visualizzato. Puoi confermare questa impostazione regolando le dimensioni della finestra in modo che la parola "elit" non entri nella riga di testo visibile.
Manuale d'uso
Nel secondo esempio, la proprietà trattini è impostata su manual, il che significa che il trattino morbido viene visualizzato solo quando il margine interrompe la parola "elit". Anche in questo caso, puoi confermare questa impostazione regolando le dimensioni della finestra.
Utilizzo dell'auto
Nel terzo esempio, la proprietà trattini è impostata su auto. In questo caso, non è necessario un trattino morbido, poiché lo user agent determinerà automaticamente le posizioni dei trattini. Se regoli le dimensioni della finestra, vedrai che il browser inserisce un trattino tra le parole di questo esempio nello stesso punto del secondo, anche se non è presente un trattino morbido. Se continui a ridurre la finestra, vedrai che il browser è in grado di inserire interruzioni di riga tra due sillabe qualsiasi del testo.