Tekst wychodzi poza kontener? Nie martw się. Jest na to lekarstwo. Znajduje się
ono w apteczce w napisem “CSS3”. Poznajmy dziś czym jest overflow-wrap.
Kiedyś (w CSS2) reguła ta nazywała się
word-wrap, jednak przyszły czasy nowej specyfikacji i powstał pomysł zmiany nazwy. Czy słusznie?
Jak działa reguła “overflow-wrap”?
Najlepiej będzie jak sam zobaczysz.
Jakie są jej możliwości?
Występują dwie opcje:
- zwykła prezentacja liter, znak po znaku, wiersz zostanie złamany po wystąpieniu białego znaku
[SELECTOR] {
overflow-wrap: normal; /* domyślnie */
}
- łamanie wiersza przed znakiem, który miałby być wyświetlony poza kontenerem
[SELECTOR] {
overflow-wrap: break-word;
}
Więcej do przeczytania na stronie.
Wskazówka
Opisywaną regułę świetnie używa się z inną, tj. z
hyphens: auto;, która troszczy się o to, aby po zawinięciu wiersza dostawić znak myślnika, oznaczającego przeniesienie wyrazu. Efekt, którego zostaliśmy nauczeni w podstawówce jest zrealizowany!
Czy mogę używać?
Wsparcie jest szerokie. Można powiedzieć, że każda przeglądarka wspiera
łamanie wiersza, bo jeśli nie działa overflow-wrap: break-word (może używamy
wersji przeglądarki z poprzedniej epoki), to zawsze możemy użyć
word-wrap: break-word i uniknąć ewentualnych nieprzyjemności.
Na potwierdzenie wkleję tutaj oryginalny tekst ze specyfikacji
For legacy reasons, UAs must treat word-wrap as an alternate name for the overflow-wrap property, as if it were a shorthand of overflow-wrap.
Specyfikacja
Jeśli chciałbyś poczytać specyfikację tej reguły, to jest ona opisana w standardzie CSS3. Btw. wiesz, że to ostatnia wersja CSS?
Nie będzie CSS4.
Konsorcjum W3C przyjęło zasadę, że feature-y w CSS będą rozwijały się samodzielnie. Tym samym, nie powstanie nowa wersja CSS, która mogłaby je agregować.
W sumie to ciekawy zabieg. Interesujące jest to, że ścieżka rozwoju CSS jest taka jak przed chwilą opisałem, a ścieżka rozwoju JavaScript taka, że co roku musi powstać nowa wersja.
Ciekawe co z HTMLem? 😄 (Na te pytanie odpowiedział Commander w komentarzu pod tym artykułem. Thanks man!)
Performance
Jeśli martwisz się wydajnością, bo może chcesz ustawić tą regułę w locie, to masz problem. Generuje ona wszystkie 3 zachowania:
- Layout
- Paint
- Composite
Więcej na ten temat na stronie CSS Triggers autorstwa Paula Lewisa.
Historia
Tym razem odpuszczam historię na temat tej reguły. Jednak, jeśli jesteś zainteresowany to zapraszam na tą stronę, gdzie możesz poczytać na ten temat.