W wielu językach pisanych można dzielić wiersze między sylabami i między słowami. Jest to często robione, aby zmieścić więcej znaków w wierszu tekstu, co pozwala zmniejszyć liczbę wierszy w obszarze tekstowym i w ten sposób zaoszczędzić miejsce. W takich językach przerwa jest wizualnie oznaczona za pomocą łącznika ('-').
CSS Text Module Level 3 definiuje właściwość „hyphens”, która umożliwia określenie, kiedy użytkownikom wyświetlane są łączniki i jak mają się zachowywać. Od wersji 55 przeglądarka Chrome implementuje właściwość łączników.
Zgodnie ze specyfikacją właściwość łączników ma 3 wartości: none, manual i auto. Aby to zilustrować, musimy użyć miękkiego łącznika (­), jak w tym przykładzie.
Google ipsum dolor sit amet, consectetur adipiscing e­lit.
Miękki dywiz jest wyświetlany tylko wtedy, gdy występuje na końcu marginesu. Sposób renderowania tego łącznika w Chrome 55 lub nowszej wersji zależy od wartości właściwości CSS hypens.
-webkit-hyphens: manual;
hyphens: manual;
Połączenie tych elementów daje taki wynik:
Zwróć uwagę, że miękki łącznik jest niewidoczny. We wszystkich przypadkach, gdy słowo zawierające miękki łącznik mieści się na jednej linii, łącznik jest niewidoczny. Teraz przyjrzyjmy się, jak zachowują się wszystkie 3 wartości myślnika.
Brak
W pierwszym przykładzie właściwość łączników ma wartość none. Zapobiega to wyświetlaniu miękkiego łącznika. Możesz to sprawdzić, dostosowując rozmiar okna tak, aby słowo „elit” nie mieściło się w widocznym wierszu tekstu.
Korzystanie z instrukcji
W drugim przykładzie właściwość łączników jest ustawiona na manual, co oznacza, że łącznik miękki będzie widoczny tylko wtedy, gdy margines podzieli słowo „elit”. Ponownie możesz to potwierdzić, dostosowując rozmiar okna.
Automatyczne
W 3 przykładzie właściwość łączników ma wartość auto. W tym przypadku nie jest potrzebny znak łącznika, ponieważ klient użytkownika automatycznie określi jego lokalizację. Jeśli zmienisz rozmiar okna, zobaczysz, że przeglądarka w tym przykładzie wstawia znak łącznika w tym samym miejscu co w drugim przykładzie, ale bez znaku miękkiego. Jeśli nadal będziesz zmniejszać okno, zauważysz, że przeglądarka może dzielić wiersze między dowolnymi 2 sylabami w tekście.