word-break хусусияти

word-break хусусияти контейнернинг энига сиғмайдиган бўлган узун сўзнинг ҳарфларини янаги сатрга кўчириш имконини беради.

Синтаксис

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

Қийматлар

standart қиймат: normal.

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

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

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

Результат:

Мисол . break-all қиймати

Энди сиғмаган ҳарфлар оддийгина кейинги сатрга кўчирилади:

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

Результат:

Қаранг