Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Łamanie długich ciągów znaków

Email Drukuj PDF

word-wrap

Dostępne wartości:

normal | break-word | inherit

Wartość domyślna:

normal

Przykład:

p {word-wrap:break-word;}

Dziedziczenie:

Tak

Obsługa:

Mozilla Firefox, Chrome, Safari, Internet Explorer

Za pomocą stylu word-wrap możemy kontrolować zachowanie przeglądarki podczas formatowania długich słów niemieszczących się w określonym elemencie. Na początek prosty przykład.

<p style="width:200px;border:solid 1px black;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent.non.turpis.at.leo.tempus.consectetur.vitae.non.mi.</p>

Analizując powyższy przykład, zwróć uwagę na następujące elementy:

  • szerokość akapitu została określona na 200px, a w celu poprawy czytelności uwidoczniłem krawędzie całego bloku;

  • w pogrubionym fragmencie tekstu spacje zastąpiłem kropkami, tak by uzyskać jedno bardzo długie słowo.

Poniżej zamieszczam przykład działania analizowanego kodu. Jak łatwo można się domyślić, nasze bardzo długie słowo nie mieści się w wyznaczonym obszarze i wystaje poza ten obszar.

<<przykład>>

<div class="przyklad">

<p style="width:200px;border:solid 1px black;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent.non.turpis.at.leo.tempus.consectetur.vitae.non.mi. </p>

</div

<</przykład>>

Korzystając ze stylu word-wrap, możemy wymusić złamanie długiego słowa, tak by ostatecznie zmieściło się ono w wyznaczonym obszarze. Odpowiednia definicja stylu musi mieć postać:

P

 {

word-wrap:break-word;

}

Poniżej zamieszczam przykład działania prezentowanego stylu.

<<przykład>>

<div class="przyklad">

<p style="width:200px;border:solid 1px black;word-wrap:break-word;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent.non.turpis.at.leo.tempus.consectetur.vitae.non.mi. </p>

</div>

<</przykład>>

Niestety efekt działania stylu word-wrap zobaczą jedynie posiadacze przeglądarek Mozilla Firefox, Safari, Chrome oraz Internet Explorer. Natomiast użytkownicy Opery muszą zadowolić się rysunkiem 15.14.

Rysunek 15.14. Przykład działania stylu word-wrap

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15449274