text-overflow ගුණය

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

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

වාක්‍ය රචනය

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

අගයන්

අගය	විස්තරය
`ellipsis`	කපා දැමූ පාඨයේ අවසානයට ත්‍රිබින්දුව එකතු කරයි.
`clip`	ත්‍රිබින්දුව අවසානයට එකතු නොකරයි (මෙය පෙරනිමි අගය වේ, අවශ්‍ය විට ගුණයේ ක්‍රියාකාරිත්වය අවලංගු කිරීම සඳහා අවශ්‍ය වේ).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

මෙයද බලන්න

word-break සහ overflow-wrap ගුණ,
ඒවා දිගු වචනයක අක්ෂර නව පේළියකට මාරු කිරීමට ඉඩ දෙයි
hyphens ගුණය,
එය වචනවල වර්ග සහිතව කැඩීම් සක්‍රිය කරයි
overflow ගුණය,
එය කොටුවේ මායිම ඉක්මවා විහිදෙන කොටස් කපා දමයි