W wielu językach pisanych można robić podział między sylabami i słowami. Często dzięki tej zmianie w wierszu tekstu można umieścić więcej znaków, aby zmniejszyć liczbę wierszy w obszarze tekstowym i zaoszczędzić w ten sposób miejsce. W takich językach przerwa jest oznaczona wizualnie łącznikiem („-”).
Moduł tekstowy CSS, poziom 3 definiuje właściwość łączników, która określa, kiedy łączniki są wyświetlane użytkownikom i jak się zachowują. Od wersji 55 Chrome implementuje właściwość łączników.
Zgodnie ze specyfikacją właściwość łączniki ma 3 wartości: none
, manual
i auto
. Aby to zilustrować, użyjemy łącznika miękkiego (­
), tak jak w tym przykładzie.
Google ipsum dolor sit amet, consectetur adipiscing e­lit.
Łącznik miękki wyświetla się tylko wtedy, gdy znajduje się na końcowym marginesie. Sposób renderowania tego łącznika w Chrome 55 i nowszych wersjach zależy od wartości właściwości CSS hypens
.
-webkit-hyphens: manual;
hyphens: manual;
Efekt połączenia tych elementów wygląda tak:
Zwróć uwagę, że miękki łącznik jest niewidoczny. We wszystkich przypadkach, gdy słowo zawierające miękki łącznik mieści się w jednym wierszu, będzie on niewidoczny. Przyjrzyjmy się teraz zachowaniu wszystkich 3 wartości łącznika.
Nie wybrano
W pierwszym przykładzie właściwość łączników ma wartość none
. Zapobiega to wyświetlaniu łącznika. Możesz to sprawdzić, dostosowując rozmiar okna tak, aby słowo „elit” nie zmieściło się w widocznym wierszu tekstu.
Korzystanie z instrukcji ręcznych
W drugim przykładzie właściwość łączniki ma wartość manual
, co oznacza, że łącznik będzie pojawiać się tylko wtedy, gdy margines zostanie przerwany w postaci słowa „elit”. Możesz to także potwierdzić, zmieniając rozmiar okna.
Automatyczna
W trzecim przykładzie właściwość łączniki jest ustawiona na auto
. W takim przypadku nie jest potrzebny łącznik, ponieważ klient użytkownika automatycznie określi jego lokalizacje. Jeśli zmienisz rozmiar okna, zobaczysz, że przeglądarka umieszcza łącznik w tym samym miejscu co w drugim miejscu, ale nie zawiera łącznika. Jeśli nadal będziesz zmniejszać okno, zobaczysz, że przeglądarka potrafi podzielić wiersze między 2 sylabami w tekście.