Własność CSS overflow-wrap

Własność CSS overflow-wrap decyduje, czy przeglądarka może dzielić bardzo długie ciągi znaków na wiersze w miejscach, w których normalnie jest to niedozwolone, aby zapobiec ich wyjściu poza obręb elementu.

Przykład

W poniższym przykładzie własność overflow-wrap zezwala na dzielenie na wiersze długich wyrazów, które nie mieszczą się w obrębie zawierającego je elementu:

<style>
p {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  background-color: lightpink;
  overflow-wrap: break-word;
}
</style>
...
<p>Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.</p>

Efekt:

Wartości i składnia

Własność overflow-wrap jako wartość przyjmuje jedno z trzech słów kluczowych:

normal

Wiersze mogą być łamane tylko w dozwolonych miejscach, takich jak na spacji rozdzielającej słowa.

break-word

W razie konieczności wiersze mogą być łamane w dowolnym miejscu, aby zapobiec wyjściu treści poza obręb pola elementu. Złamanie nie jest sygnalizowane dodaniem jakiegokolwiek znaku. Nie uwzględnia złamań wiersza przy obliczaniu minimalnego rozmiaru elementu.

anywhere

Działa tak samo, jak break-word, tylko uwzględnia złamania wiersza przy obliczaniu minimalnego rozmiaru elementu.

Różnica między słowami kluczowymi break-word i anywhere

Różnicę działania między słowami kluczowymi break-word i anywhere można zauważyć tylko w przypadku, gdy element ma szerokość ustawioną na min-content. W pozostałych przypadkach nie ma między nimi żadnej różnicy.

Ustawienie overflow-wrap: break-word sprawia, że minimalny rozmiar treści jest obliczany w taki sposób, jakby żadne z zawartych w niej słów nie zostało złamane. W efekcie minimalny rozmiar treści jest równy szerokości najdłuższego znajdującego się w niej słowa.

Natomiast ustawienie overflow-wrap: anywhere powoduje, że minimalny rozmiar treści jest obliczany z uwzględnieniem wszystkich możliwych punktów złamania. A ponieważ w tym przypadku złamanie wiersza jest dopuszczalne w każdym miejscu, minimalna szerokość treści odpowiada mniej więcej szerokości najszerszego znaku.

Poniższy przykład ilustruje tę różnicę:

<style>
.a {
  overflow-wrap: break-word;
  width: min-content;
  border: 1px solid black;
}

.b {
  overflow-wrap: anywhere;
  width: min-content;
  border: 1px solid black;
}
</style>
...
<p class="a">Loremipsumdolor sit amet.</p>
<p class="b">Loremipsumdolor sit amet.</p>

Efekt:

Podsumowanie