Хосияти 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;
}

Результат:

Ҳамчунин бубинед