CSS text-overflow ပိုင်ဆိုင်မှု
ဥပမာ
text-overflow ပိုင်ဆိုင်မှုကို အသုံးပြုခြင်း-
div
{
white-space: nowrap;
overflow:
hidden;
text-overflow: ellipsis;
}
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
text-overflow
ဖော်ပြမထားသော အကြောင်းအရာသည် အသုံးပြုသူအား မည်ကဲ့သို့ လွှမ်းခြုံထားသင့်သည်ကို ပိုင်ဆိုင်မှုက သတ်မှတ်ပေးပါသည် ။ ၎င်းကို ဖြတ်တောက်ခြင်း၊ ellipsis (...) ကိုပြသနိုင်သည် သို့မဟုတ် စိတ်ကြိုက်စာကြောင်းတစ်ခုကို ပြသနိုင်သည်။
စာသားပိုလျှံမှုအတွက် အောက်ပါဂုဏ်သတ္တိနှစ်ခုစလုံး လိုအပ်သည်-
- နေရာလွတ်- nowrap;
- ပြည့်လျှံ: ဝှက်ထား;
မူလတန်ဖိုး: | ညှပ် |
---|---|
အမွေဆက်ခံသည်- | မဟုတ်ဘူး |
သက်ဝင်လှုပ်ရှားနိုင်သော | မဟုတ်ဘူး ကာတွန်း အကြောင်းဖတ်ပါ။ |
ဗားရှင်း- | CSS3 |
JavaScript syntax- | အရာဝတ္ထု .style.textOverflow="ellipsis" |
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
နံပါတ်များ -o- ရှေ့နောက်ဆက်တွဲဖြင့် လုပ်ဆောင်သော ပထမဗားရှင်းကို သတ်မှတ်ပါ။
Property | |||||
---|---|---|---|---|---|
text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
CSS Syntax
text-overflow: clip|ellipsis|string|initial|inherit;
အိမ်ခြံမြေတန်ဖိုးများ
Value | Description | Play it |
---|---|---|
clip | Default value. The text is clipped and not accessible | |
ellipsis | Render an ellipsis ("...") to represent the clipped text | |
string | Render the given string to represent the clipped text | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
နောက်ထပ် ဥပမာများ
ဥပမာ
ဟာဗာအကျိုးသက်ရောက်မှုနှင့်အတူ စာသားအလျှံပယ် (စာသားတစ်ခုလုံးကို အပေါ်သို့တင်ထားရန်)
div.a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div.a:hover {
overflow: visible;
}
ဆက်စပ်စာမျက်နှာများ
CSS သင်ခန်းစာ- CSS စာသားအကျိုးသက်ရောက်မှု များ
HTML DOM ရည်ညွှန်းချက်- textOverflow ပိုင်ဆိုင်မှု