Ostatnio edytowany:

word-wrap

Autor: Virtual Patriot

Opis właściwości word-wrap

Za pomocą właściwości word-wrap możemy określić, w jaki sposób mają zostać potraktowane przez przeglądarkę internetową wyrazy dłuższe niż rozmiar obszaru zawartości interesującego nas elementu HTML.

Dla zaawansowanych

gdy element HTML posiada poziomy tryb zapisu treści, wtedy mowa tu o wyrazach dłuższych niż rozmiar szerokości obszaru zawartości elementu HTML

gdy element HTML posiada pionowy tryb zapisu treści, wtedy mowa tu o wyrazach dłuższych niż rozmiar wysokości obszaru zawartości elementu HTML

innymi słowy mowa tu o wyrazach dłuższych niż rozmiar szerokości logicznej obszaru zawartości elementu HTML

Dodatkowe techniczne informacje o właściwości word-wrap

przeznaczenie
  • element HTML każdego typu
dziedziczenie
  • tak
wartość initial
wyjątki initial
  • brak
animowanie
  • nie

Interpretacja właściwości word-wrap

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości word-wrap

normal

Opis

Wartość normal jest domyślną wartością właściwości word-wrap.

Domyślnie wyrazy dłuższe niż rozmiar obszaru zawartości elementu HTML nie są przełamywane do następnego wiersza.

Przykład

ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890

Wyraz dłuższy niż rozmiar szerokości obszaru zawartości przykładowego elementu "div" nie został przełamany do następnego wiersza.

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        width:350px;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890
    </div>

  </body>
</html>

break-word

Opis

Za pomocą wartości break-word właściwości word-wrap możemy sprawić, że wyrazy dłuższe niż rozmiar obszaru zawartości interesującego nas elementu HTML zostaną przełamane do następnego wiersza.

Przykład

ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890

Wyraz dłuższy niż rozmiar szerokości obszaru zawartości przykładowego elementu "div" został przełamany do następnego wiersza, ponieważ do wspomnianego elementu "div" została dodana właściwość "word-wrap" wraz z wartością "break-word".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        word-wrap:break-word;
        width:350px;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>
      ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890
    </div>

  </body>
</html>