Własność CSS word-break

Własność CSS word-break określa sposób łamania wierszy tekstu. Decyduje ona zarówno o złamaniach między słowami, jak i wewnątrz słów, tzn. dotyczy wszystkich miejsc, w których złamanie wiersza tekstu jest normalnie możliwe i dozwolone.

Wartości i składnia

Własność word-break jako wartość przyjmuje jedno z następujących słów kluczowych.

normal

Wiersze są łamane według normalnych zwyczajowych zasad, w efekcie czego, jeśli bardzo długi wyraz okaże się szerszy niż zawierający go element, to wyjdzie on poza granice tego elementu. Jest to wartość domyślna.

break-all

Pozwala na złamanie wiersza na dowolnym znaku, co umożliwia uniknięcie potencjalnego wyjścia tekstu poza granice elementu, jeśli zawiera on bardzo długie słowo.

keep-all

Wyłącza łamanie wiersza w tekstach w językach azjatyckich (chińskim, koreańskim, japońskim), w których nie powinno się łamać wierszy. W tekstach w innych językach ta własność działa tak samo, jak normal.

auto-phrase

Działa tak samo, jak wartość normal, ale dodatkowo nakazuje przeglądarce unikać łamania wierszy między słowami, które tworzą naturalnie brzmiące wyrażenia.

break-word

Ta wartość jest wycofywana, ale uwzględniono ją w specyfikacji CSS Text Module Level 4 ze względu na zgodność wsteczną. Jej działanie jest równoważne z ustawieniem word-break: normal i overflow-wrap: anywhere niezależnie od rzeczywistego ustawienia własności overflow-wrap.

Przykłady

Poniższy przykład przedstawia różnicę w działaniu między wartościami normal i break-all.

p#left {
  width: 200px;
  outline: 1px solid black;  
  word-break: break-all;
}

p#right {
  width: 200px;
  outline: 1px solid black;  
  word-break: normal;
}

Wartość normal pozwoliła, aby bardzo długi wyraz wyszedł poza granice elementu. Natomiast wartość break-all sprawiła, że priorytetem stało się niedopuszczenie do przepełnienia, dzięki czemu bardzo długo wyraz został „złamany” we właściwym miejscu.

Podsumowanie