Gestisci i trattini con CSS

Joe Medley
Joe Medley

In molte lingue scritte è possibile spezzare le sillabe e le parole tra le parole. Questa operazione spesso consente di inserire più caratteri su una riga di testo con l'obiettivo di contenere meno righe nell'area di testo e, quindi, di risparmiare spazio. In questi casi, l'interruzione viene indicata visivamente con un trattino ('-').

Il livello 3 del modulo di testo CSS definisce una proprietà dei trattini per controllare quando i trattini vengono mostrati agli utenti e il loro comportamento quando vengono mostrati. A partire dalla versione 55, Chrome implementa la proprietà dei trattini. In base alla specifica, la proprietà dei trattini ha tre valori: none, manual e auto. Per spiegare meglio, è necessario utilizzare un trattino morbido (­), come nell'esempio seguente.

Google ipsum dolor sit amet, consectetur adipiscing e­lit.

Un trattino morbido viene mostrato solo se si trova al margine finale. La modalità di visualizzazione di questo trattino in Chrome 55 o versioni successive dipende dal valore della proprietà hypens CSS.

-webkit-hyphens: manual;
hyphens: manual;

La combinazione di questi elementi produce un risultato simile al seguente:

Screenshot a riga singola

Tieni presente che i trattini bassi non sono visibili. In ogni caso, quando una parola contenente il trattino morbido si adatta a un'unica riga, la parentesi non sarà visibile. Ora vediamo come si comportano tutti e tre i valori del trattino.

Nessuna applicazione

Nel primo esempio, la proprietà dei trattini è impostata su none. In questo modo, il trattino soft non viene visualizzato. Puoi verificarlo regolando le dimensioni della finestra in modo che la parola "elit" non rientri nella riga di testo visibile.

Google ipsum dolor sit amet, consectetur adipiscing elit.

Utilizzo del manuale

Nel secondo esempio, la proprietà dei trattini è impostata su manual, il che significa che il trattino soft verrà visualizzato solo quando il margine interrompe la parola "elit". Anche in questo caso, puoi confermare questa differenza regolando le dimensioni della finestra.

Google ipsum dolor sit amet, consectetur adipiscing elit.

Utilizzo automatico

Nel terzo esempio, la proprietà dei trattini è impostata su auto. In questo caso, non è necessario alcun trattino morbido poiché lo user agent determinerà automaticamente la posizione dei trattini. Se ridimensiona la finestra, puoi notare che il browser applica un trattino di questo esempio allo stesso punto del secondo, anche se non sono presenti trattini morbidi. Se continui a ridurre la finestra, noterai che il browser è in grado di interrompere le righe tra due sillabe nel testo.

Google ipsum dolor sit amet, consectetur adipiscing elit.