text-overflow ဂုဏ်သတ္တိ

text-overflow ဂုဏ်သတ္တိသည် ဘလောက်တစ်ခုအတွင်း နေရာမကျန်ပဲ ဖြတ်တောက်ထားသော စာသားအဆုံးတွင် အစက်သုံးစက် (ellipsis) ထည့်ပေးသည်။

ဤဂုဏ်သတ္တိ အလုပ်လုပ်ရန် စာသားကို overflow သို့မဟုတ် overflow-x ဂုဏ်သတ္တိများဖြင့် hidden, auto သို့မဟုတ် scroll တန်ဖိုးများသတ်မှတ်၍ ဖြတ်တောက်ထားရမည်။ visible (ပုံသေသတ်မှတ်ချက်အဖြစ်) သတ်မှတ်ထားပါက - text-overflow အလုပ်လုပ်မည် မဟုတ်ပါ။

Syntax

selector {
	text-overflow: ellipsis | clip;
}

တန်ဖိုးများ

တန်ဖိုး	ဖော်ပြချက်
`ellipsis`	ဖြတ်တောက်ထားသော စာသားအဆုံးတွင် အစက်သုံးစက် (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 ကို သတ်မှတ်ပေးပါက၊ လှိမ့်နိုင်သော ဘားတန်း (scroll bar) ပေါ်လာမည် ဖြစ်သော်လည်း၊ အစက်သုံးစက်သည် ရှိနေဆဲဖြစ်သည်။ ဥပမာရှိ လှိမ့်နိုင်သော ဘားတန်းကို ကြိုးစားလှိမ့်ကြည့်ပါ:

<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 ဂုဏ်သတ္တိ၊
ဘလောက်၏ နယ်နိမိတ်ကို ကျော်လွန်ထွက်နေသော အစိတ်အပိုင်းများကို ဖြတ်တောက်ပေးသည်