Ł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ł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 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:

See the Pen
word-wrap by Aura (@Julka85)
on CodePen.0

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:

https://www.w3schools.com/cssref/css3_pr_word-wrap.asp