:sparkles: PWA :sparkles:
Logo

Piotr Kowalski

Organizator WarsawJS , Trener, YouTuber

Zobacz, jak "overflow-wrap" może Cię uratować!

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?

Apteczka i tekst overflow-wrap: break-word
Apteczka CSS3, a w niej overflow-wrap.

Jak działa reguła “overflow-wrap”?

Najlepiej będzie jak sam zobaczysz.

See the Pen overflow-wrap/word-wrap demo by Louis Lazaris (@impressivewebs) on CodePen.

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
overflow-wrap: normal; /* domyślnie */
  • łamanie wiersza przed znakiem, który miałby być wyświetlony poza kontenerem
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? :smiley: (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.

Tagi: css

2 dni wcześniej napisałem: Jak wyświetlić liczbę osób lajkujących nasz fanpage? 2 dni później napisałem: Konferencja: Code Europe 2017

Możesz osadzić kod wykorzystując: <pre><code class="{language}"></code></pre>