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

Хусусияти word-break ба ҳарфҳои калимаи тӯлонӣ имкон медиҳад, ки ба сатри нав интиқол дода шаванд, агар ин калима ба паҳнои контейнер ҷой нашавад.

Синтаксис

cssинтихобкунанда {
  word-break: break-all | keep-all | normal;
}

Қиматҳо

Қимати пешфарз: 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;
}

Результат:

Ҳамчунин нигаред