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

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

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

Syntax

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

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

Результат:

ဆက်လက်ကြည့်ရှုရန်