column-count ဂုဏ်သတ္တိ
column-count ဂုဏ်သတ္တိသည် စာသားအများကော်လံစနစ်တွင် ကော်လံအရေအတွက် အကြံပြုချက် တစ်ခုကို သတ်မှတ်ပေးသည်။
ကော်လံအများအပြားအတွက် ၎င်းတို့၏ တကယ့်အရေအတွက်သည် သတ်မှတ်ထားသည့် အရေအတွက်နှင့် ကွဲပြားနိုင်သည်၊
ထိုကွဲပြားမှုသည် ကော်လံ၏အကျယ်နှင့် ၎င်းတို့ကြားရှိ အကွာအဝေးအရွယ်အစားပေါ်တွင် မူတည်ပါသည်။
ဝါကျဖွဲ့စည်းပုံ
selector {
column-count: number | auto;
}
တန်ဖိုးများ
| တန်ဖိုး | ဖော်ပြချက် |
|---|---|
| ဂဏန်း | သတ်မှတ်ထားသော ကော်လံအရေအတွက်ကို သတ်မှတ်ပေးသည်။ ပိုမိုတိကျစွာဆိုရလျှင်၊ ဘရောက်ဆာကို ကော်လံအရေအတွက် ဤပမာဏကို အသုံးပြုရန် အကြံပြုခြင်း ဖြစ်သည်။ အဘယ့်ကြောင့်ဆိုသော် ၎င်းတို့၏ တကယ့်အရေအတွက်သည် သတ်မှတ်ထားသည့် အရေအတွက်နှင့် ကွဲပြားနိုင်သောကြောင့်ဖြစ်သည်၊ ထိုကွဲပြားမှုသည် ကော်လံ၏အကျယ်နှင့် ၎င်းတို့ကြားရှိ အကွာအဝေး၏ အရွယ်အစားပေါ်တွင် မူတည်ပါသည်။ |
auto |
ဘရောက်ဆာသည် သင့်လျော်သော ကော်လံအရေအတွက်ကို မိမိဘာသာ ရွေးချယ်ပေးသည်။ |
ပုံသေတန်ဖိုး: auto.
ဥပမာ
ဤဥပမာတွင် စာသားကို 3
ကော်လံအဖြစ် ပိုင်းခြားသွားမည်ဖြစ်သည် (သေချာသည်မှာ၊
အများကော်လံစနစ်ကို ထောက်ပံ့သော ဘရောက်ဆာများတွင် ဖြစ်ပြီး၊
ကျန်သည်များတွင်မူ ကော်လံတစ်ခုတည်းဖြင့် သာမန်စာသားသာဖြစ်နေမည်):
<div id="elem">
some long text
</div>
#elem {
column-count: 3;
text-align: justify;
}
:
ဥပမာ . auto တန်ဖိုး
ဤဥပမာတွင် ကော်လံ၏အကျယ် column-width
ကို 150px ဖြင့် သတ်မှတ်ထားပြီး၊ ၎င်းတို့၏ အရေအတွက် column-count
ကို auto တန်ဖိုးဖြင့် ထားရှိထားသည် - ဘရောက်ဆာသည် မိမိဘာသာ
လိုအပ်သော ကော်လံအရေအတွက်နှင့် ၎င်းတို့ကြားရှိ အကွာအဝေးကို
ရွေးချယ်ပေးမည်:
<div id="elem">
some long text
</div>
#elem {
column-count: auto;
column-width: 150px;
text-align: justify;
}
:
ဒါလည်းကြည့်ပါ
-
column-widthဂုဏ်သတ္တိ,
အရာသည် ကော်လံ၏အကျယ်ကို သတ်မှတ်ပေးသည် -
column-gapဂုဏ်သတ္တိ,
အရာသည် ကော်လံများကြားရှိ အကွာအဝေးကို သတ်မှတ်ပေးသည် -
column-ruleဂုဏ်သတ္တိ,
အရာသည် ကော်လံများကြားရှိ နယ်နိမိတ်ကို သတ်မှတ်ပေးသည် -
column-spanဂုဏ်သတ္တိ,
အရာသည် အဲလီမင့်တစ်ခု ပြန့်ကားသင့်သည့် ကော်လံအရေအတွက်ကို သတ်မှတ်ပေးသည် -
columnsဂုဏ်သတ္တိ,
အရာသည် အများကော်လံစနစ်အတွက် အတိုကောက်ဂုဏ်သတ္တိတစ်ခုဖြစ်သည်
