Уласцівасць overflow-wrap

Уласцівасць overflow-wrap дазваляе перанесці літары доўгага слова на новы радок, калі гэтае слова не змяшчаецца ў шырыню кантэйнера.

Сінтаксіс

cssселектар {
  overflow-wrap: break-word | normal;
}

Значэнні

Значэнне па змаўчанні: normal.

Прыклад . Значэнне normal

У гэтым прыкладзе вельмі доўгае слова не змесціцца ў кантэйнер і вылезе за яго межы (пры гэтым пачнецца з новага радка):

html<div id="elem">
  Lorem ipsum dolor sit amet
  ооооооооооооооооооооооооооооочэньдоўгаеслова,
  consectetur adipiscing elit.
</div>

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

Результат:

Прыклад . Значэнне break-word

А цяпер тыя літары, якія не змяшчаліся, проста пераносяцца на наступны радок (пры гэтым доўгае слова ўсё роўна будзе пачынацца з новага радка):

html<div id="elem">
  Lorem ipsum dolor sit amet
  ооооооооооооооооооооооооооооочэньдоўгаеслова,
  consectetur adipiscing elit.
</div>

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

Результат:

Глядзіце таксама