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

Результат:

මෙයද බලන්න