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

piątek, 12 marzec 2010 08:22 Administrator
Drukuj

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:

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