Właściwość word-break

Właściwość word-break umożliwia przeniesienie liter długiego słowa do nowego wiersza, jeśli to słowo nie mieści się w szerokości kontenera.

Składnia

cssselektor {
  word-break: break-all | keep-all | normal;
}

Wartości

Wartość domyślna: normal.

Przykład . Wartość normal

W tym przykładzie bardzo długie słowo nie zmieści się w kontenerze i wystanie poza jego granice (przy czym zacznie się od nowego wiersza):

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  width: 200px;
  word-break: normal;
  border: 1px solid red;
}

Результат:

Przykład . Wartość break-all

A teraz te litery, które się nie mieściły, po prostu zostaną przeniesione do następnego wiersza:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  width: 200px;
  word-break: break-all;
  border: 1px solid red;
}

Результат:

Zobacz też