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

Результат:

අදාළ තොරතුරු