Łamanie na części ciągu znaków CSS word-wrap

Czas czytania: < 1 minut

Dzisiaj na warsztat biorę właściwość CSS word-wrap! Właściwość tą pominęłam w poprzednim wpisie kiedy omawiałam metody edycji tekstu na stronie internetowej. Dlatego dziś do niej wracam.

Do czego służy word-wrap

Z pomocą tej właściwości możemy dzielić słowa na części. W przypadkach gdy są zbyt długie i nie są w stanie zmieścić w jednej linii. Być może na PC to, rzadkie zjawisko ale np. na tablecie lub telefonie; już spotykane.

Jakie wartości przyjmuje właściwość word-wrap

Praktycznie będą nas interesowały 2 wartości właściwości:

  • normal – jest to domyślna wartość. Zapobiega ona dzieleniu słów na części
  • break-word – wartość ta umożliwia dzielenie słów na części. W efekcie to co się nie mieści zostanie przeniesione do nowej linii.

Teoria teorią, najlepiej zobaczmy jak to działa w praktyce.

Przykłady:


word-wrap:normal;

 

abecadło z pieca spadło i się potłukło aaaaaaaaaaaaaaaa trochę albo i nie

word-wrap:break-word;

 

abecadło z pieca spadło i się potłukło aaaaaaaaaaaaaaaa trochę albo i nie

Wsparcie przez przeglądarki

Na chwilę obecną nie znalazłam informacji by właściwość nie była obsługiwana, przez jakąś przeglądarkę internetową. Wychodzi więc na to, że wszystkie przeglądarki powinny obsłużyć tę właściwość!

Poniżej zamieściłam link do innej ciekawej właściwości, która również łamie tekst. Tyle, że ona nie przenosi tekstu do nowej linijki a ukrywa ją.

Warto przeczytać:

https://www.aurainweb.pl/2017/04/skrocenie-zbyt-dlugiego-tekstu-uzyciem-css/

 

źródło: