Właściwość overflow-wrap

Właściwość overflow-wrap pozwala przenieść litery długiego słowa do nowego wiersza, jeśli to słowo nie mieści się w szerokości kontenera.

Składnia

cssselektor {
  overflow-wrap: break-word | 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 wyjdzie poza jego granice (jednocześnie rozpocznie się od nowego wiersza):

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

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

Результат:

Przykład . Wartość break-word

A teraz te litery, które się nie mieściły, po prostu przeniosą się do następnego wiersza (jednocześnie długie słowo nadal będzie zaczynać się od nowego wiersza):

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

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

Результат:

Zobacz też