Zarządzanie łącznikami za pomocą CSS

Joe Medley
Joe Medley

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:

Zrzut ekranu z jednym wierszem

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.

Google ipsum dolor sit amet, consectetur adipiscing elit.

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.

Google ipsum dolor sit amet, consectetur adipiscing elit.

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.

Google ipsum dolor sit amet, consectetur adipiscing elit.