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

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.

Spis treści

Toggle

Do czego służy word-wrap

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

W takich przypadkach strona może wyglądać nie estetycznie. W zależności od ustawień witryny:

pojawi się u dołu scorll
część tekstu wychodząca za ekran zostanie ucięta

Czasami nie mieszczącymi się wyrażeniami są np. adresy stron internetowych. W tedy dzięki tej właściwości nie musimy ich zmniejszać aż będą nieczytelne a jedynie podzielić na części.

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, łamanie słów i ciągów znaków na części. W efekcie to co się nie mieści zostanie przeniesione do nowej linii. Ma to swoje zastosowanie np. w sytuacji gdy słowo, adres url się nie mieści w linii.

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

Przykłady:

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ą.