CSS စာသားအကျိုးသက်ရောက်မှုများ
CSS Text Overflow၊ Word Wrap၊ Line Breaking Rules နှင့် Writing Modes
ဤအခန်းတွင် အောက်ပါဂုဏ်သတ္တိများအကြောင်း သင်လေ့လာပါမည်။
text-overflowword-wrapword-breakwriting-mode
CSS Text Overflow
CSS ၏ text-overflowပိုင်ဆိုင်မှုသည် ပြမထားသော အကြောင်းအရာများ မည်မျှ ပြည့်လျှံနေမည်ကို သုံးစွဲသူထံ အချက်ပြသင့်သည် ဟု သတ်မှတ်သည်။
၎င်းကိုဖြတ်တောက်နိုင်သည်။
ဤသည်မှာ အကွက်ထဲတွင် အံမဝင်နိုင်သော ရှည်လျားသော စာသားအချို့ဖြစ်သည်။
သို့မဟုတ် ellipsis (... ) အဖြစ် ပြန်ဆိုနိုင်သည် ။
ဤသည်မှာ အကွက်ထဲတွင် အံမဝင်နိုင်သော ရှည်လျားသော စာသားအချို့ဖြစ်သည်။
CSS ကုဒ်သည် အောက်ပါအတိုင်းဖြစ်သည်။
ဥပမာ
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
အောက်ဖော်ပြပါ ဥပမာသည် ဒြပ်စင်ပေါ်တွင် ပျံဝဲနေချိန်တွင် ပြည့်လျှံနေသော အကြောင်းအရာကို သင်ပြသနိုင်ပုံကို ပြသသည်-
ဥပမာ
div.test:hover {
overflow: visible;
}
CSS Word Wrapping
CSS word-wrapပိုင်ဆိုင်မှုသည် ရှည်လျားသောစကားလုံးများကို ချိုးဖျက်နိုင်ပြီး နောက်စာကြောင်းတွင် ခြုံငုံနိုင်စေပါသည်။
စကားလုံးတစ်လုံးသည် ဧရိယာတစ်ခုအတွင်း အံဝင်ခွင်ကျ ရှည်လွန်းပါက၊ ၎င်းသည် အပြင်ဘက်သို့ တိုးသွားသည်-
ဤစာပိုဒ်တွင် အလွန်ရှည်သောစကားလုံးပါရှိသည်- thisisaveryveryveryveryveryverylongword။ ရှည်လျားသောစကားလုံးသည် ကွဲပြီး နောက်တစ်ကြောင်းသို့ ခြုံပါမည်။
word-wrap property သည် သင့်အား စာသားတစ်ခု၏အလယ်တွင် ပိုင်းခြားခြင်းဟု အဓိပ္ပာယ်ရသော်လည်း စာသားကို ခြုံရန် အတင်းအကြပ်လုပ်ရန် ခွင့်ပြုသည်-
ဤစာပိုဒ်တွင် အလွန်ရှည်သောစကားလုံးပါရှိသည်- thisisaveryveryveryveryveryverylongword။ ရှည်လျားသောစကားလုံးသည် ကွဲပြီး နောက်တစ်ကြောင်းသို့ ခြုံပါမည်။
CSS ကုဒ်သည် အောက်ပါအတိုင်းဖြစ်သည်။
ဥပမာ
ရှည်လျားသော စကားလုံးများကို ချိုးဖျက်၍ နောက်တစ်ကြောင်းသို့ ခြုံငုံနိုင်စေရန် ခွင့်ပြုပါ-
p {
word-wrap: break-word;
}
CSS Word Breaking
CSS word-breakပိုင်ဆိုင်မှုသည် စည်းမျဥ်းစည်းကမ်းများကို သတ်မှတ်သည်။
ဤစာပိုဒ်တွင် စာသားအချို့ပါရှိသည်။ ဤစာကြောင်းသည် မျဉ်းတုံးများ-ချိုးမည်။
ဤစာပိုဒ်တွင် စာသားအချို့ပါရှိသည်။ လိုင်းများသည် မည်သည့်ဇာတ်ကောင်တွင်မဆို ကွဲသွားမည်ဖြစ်သည်။
CSS ကုဒ်သည် အောက်ပါအတိုင်းဖြစ်သည်။
ဥပမာ
p.test1 {
word-break:
keep-all;
}
p.test2 {
word-break:
break-all;
}
CSS ရေးနည်း
CSS writing-modeပိုင်ဆိုင်မှုသည် စာသားမျဉ်းများကို အလျားလိုက် သို့မဟုတ် ဒေါင်လိုက်ချထားခြင်းရှိမရှိကို သတ်မှတ်ပေးသည်။
a ဖြင့် span element ပါသော စာသားအချို့ ဒေါင်လိုက်-rl စာရေးမုဒ်။
အောက်ဖော်ပြပါ ဥပမာတွင် မတူညီသော စာရေးနည်းအချို့ကို ပြသသည်-
ဥပမာ
p.test1 {
writing-mode: horizontal-tb;
}
span.test2 {
writing-mode: vertical-rl;
}
p.test2 {
writing-mode:
vertical-rl;
}
CSS Text Effect Properties
အောက်ပါဇယားတွင် CSS စာသားအကျိုးသက်ရောက်မှု ဂုဏ်သတ္တိများကို ဖော်ပြသည်-
| Property | Description |
|---|---|
| text-justify | Specifies how justified text should be aligned and spaced |
| text-overflow | Specifies how overflowed content that is not displayed should be signaled to the user |
| word-break | Specifies line breaking rules for non-CJK scripts |
| word-wrap | Allows long words to be able to be broken and wrap onto the next line |
| writing-mode | Specifies whether lines of text are laid out horizontally or vertically |