Свойство overflow-wrap

overflow-wrap свойстваси узун сўзнинг ҳарфларини контейнернинг энига сиғмаса, янаги сатрга кўчиришга имкон беради.

Синтаксис

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

Қийматлар

Стандарт қиймат: normal.

Мисол . Normal қиймати

Бу мисолда жуда узун сўз контейнерга сиғмайди ва унинг чегараларидан ташкарига чиқади (бу ҳолда у янаги сатрдан бошланади):

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;
}

Результат:

Мисол . Break-word қиймати

Энди сиғмаган ўша ҳарфлар сифатида, оддийгина кейинги сатрга кўчирилади (бу ҳолда узун сўз барча ҳолда янаги сатрдан бошланади):

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;
}

Результат:

Қаранг