text-overflow ගුණය

text-overflow ගුණය කපා දැමූ පාඨයේ අවසානයට ත්‍රිබින්දුව එකතු කරයි, පාඨය කොටුවට ගැලපී නොමැති නිසා කපා දැමු බව පෙන්වීම සඳහා.

මෙම ගුණය ක්‍රියාත්මක වීම සඳහා පාඨය කපා දැමිය යුතුය overflow ගුණය හරහා හෝ overflow-x ගුණය hidden, auto හෝ scroll අගයෙන්. visible ලෙස සකසා ඇත්නම් (පෙරනිමිය එයයි) - text-overflow ගුණය ක්‍රියා නොකරයි.

වාක්‍ය රචනය

cssතේරුම් ගන්නා {
  text-overflow: ellipsis | clip;
}

අගයන්

පෙරනිමි අගය: clip.

උදාහරණය . පිටතට විහිදෙන පාඨය

මෙම ඉදිරිපත් කිරීමේදී, ඉතා දිග වචනයක් අඩංගු කරන්නා තුළට ගැලපීමට නොහැකි වනු ඇත එහි මායිම් ඉක්මවා පිටතට විහිදෙනු ඇත. කපා දැමීම සිදු නොවේ:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: visible;
  border: 1px solid red;
}

Результат:

උදාහරණය . overflow ගුණය එකතු කරමු

දැන්, අඩංගු කරන්නාගේ මායිම් ඉක්මවා විහිදෙන සියල්ල, සරලව කපා දැමෙනු ඇත:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  border: 1px solid red;
}

Результат:

උදාහරණය . ellipsis අගය

දැන්, overflow ගුණයට අමතරව text-overflow ගුණයද එකතු කරමු ellipsis අගයෙන්. කපා දැමූ පාඨයට ත්‍රිබින්දුව අවසානයට එකතු වනු ඇත:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

උදාහරණය . අනුචලන දඬු සමඟ

overflow: auto සහ text-overflow: ellipsis ලෙස සකස් කරන්නේ නම්, අනුචලන දඬුවක් පෙන්වනු ඇත, නමුත් ත්‍රිබින්දුව තවමත් එකතු වනු ඇත. ඉදිරිපත් කිරීමේ අනුචලන දඬුව අනුචලනය කිරීමට උත්සාහ කරන්න:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: auto;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

උදාහරණය . ඉතා දිග වචන නොමැති නම්

අඩංගු කරන්නාගේ මායිම් ඉක්මවා විහිදෙන තරම් දිගු වචන නොමැති නම්, කපා දැමීම සිදු නොවේ (කිසිවක් පිටතට විහිදෙන්නේ නැත). පහත දැක්වෙන ඉදිරිපත් කිරීම බලන්න:

html<div id="elem">
  Lorem ipsum dolor sit amet adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

උදාහරණය . එක් පේළියක පාඨය

කෙසේ වෙතත්, අවස්ථා ඇති අතර, අපට අවශ්‍ය වන්නේ, පාඨය ඉතා දිගු වූ විට කපා දැමීමට (පාඨය සාමාන්‍යයෙන්, වෙනම වචන නොවේ) සහ ඊළඟ පේළියට මාරු නොවීමට. මෙය සිදු කරනු ලබන්නේ white-space ගුණය එකතු කිරීමෙනි nowrap අගයෙන්, එය පාඨය වෙනත් පේළියකට මාරු වීම වළක්වයි. ඉදිරිපත් කිරීම බලන්න, දැන් පාඨය කපා දමනු ලැබේ:

html<div id="elem">
  Lorem ipsum dolor sit amet adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

උදාහරණය . ප්‍රතිශතවල පළල

කොටුවේ පළල % වලින් සකස් කරන්නේ නම්, කපා දැමීම ද නිවැරදිව ක්‍රියා කරනු ඇත:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur loooooooooooooooooooooooooooooooongword
  adipiscing elit.
</div>

css#elem {
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

මෙයද බලන්න