CSS Layout - အလျှံပယ်
CSS overflow
ပိုင်ဆိုင်မှုသည် ဧရိယာတစ်ခုနှင့် အံဝင်ခွင်ကျမဖြစ်နိုင်သော ကြီးလွန်းသော အကြောင်းအရာနှင့် ဖြစ်ပျက်မှုများကို ထိန်းချုပ်သည်။
CSS Overflow
အကြောင်းအရာတစ်ခု၏အကြောင်းအရာသည် သတ်မှတ်ထားသော ဧရိယာ overflow
တွင် အံဝင်ခွင်ကျဖြစ်ရန် အလွန်ကြီးနေသောအခါတွင် အကြောင်းအရာကို ကလစ်လုပ်ရန် သို့မဟုတ် Scrollbars များထည့်ရန် သို့မဟုတ် Scrollbar များထည့်ခြင်းရှိမရှိကို သတ်မှတ်ပေးသည်။
overflow
ပိုင်ဆိုင်မှုတွင် အောက်ပါတန်ဖိုးများ ရှိသည် -
visible
- ပုံသေ။ အလျှံပယ်မဖြတ်ပါ။ အကြောင်းအရာသည် ဒြပ်စင်၏ အကွက်အပြင်ဘက်တွင် ဖော်ပြသည်။hidden
- ပြည့်လျှံမှုကို ဖြတ်တောက်ပြီး ကျန်အကြောင်းအရာများကို မမြင်နိုင်ပါ။scroll
- အလျှံပယ်ကို ဖြတ်တောက်ပြီး ကျန်အကြောင်းအရာများကို ကြည့်ရှုရန် Scrollbar ကို ထည့်သွင်းထားသည်။auto
-scroll
နှင့်ဆင်တူသော်လည်း လိုအပ်သည့်အခါမှသာ scrollbars များကိုထည့်သည်။
မှတ်ချက်overflow
။ _
မှတ်ချက်- OS X Lion (Mac) တွင်၊ scrollbars များကို ပုံသေအားဖြင့် ဝှက်ထားပြီး အသုံးပြုသည့်အခါမှသာ ပြသသည် ("overflow:scroll" ဟုသတ်မှတ်ထားသော်လည်း)။
overflow: မြင်နိုင်သည်။
ပုံမှန်အားဖြင့်၊ overflow သည် visible
၎င်းကို ညှပ်မထားဘဲ ၎င်းသည် element ၏ box ပြင်ပသို့ ပြန်ထုတ်ပေးသည်ဟု ဆိုလိုသည်-
ဥပမာ
div {
width: 200px;
height:
50px;
background-color: #eee;
overflow: visible;
}
overflow: ဝှက်ထားသည်။
တန်ဖိုး ဖြင့် hidden
၊ ပြည့်လျှံမှုကို ဖြတ်တောက်ပြီး ကျန်အကြောင်းအရာများကို ဝှက်ထားသည်-
ဥပမာ
div {
overflow: hidden;
}
overflow: scroll
တန်ဖိုးကို သတ်မှတ်ခြင်း scroll
၊ ပြည့်လျှံမှုကို ဖြတ်တောက်ပြီး ဘောက်စ်အတွင်း လှိမ့်ရန်အတွက် Scrollbar တစ်ခုကို ပေါင်းထည့်ထားသည်။ ၎င်းသည် အလျားလိုက်နှင့် ဒေါင်လိုက် နှစ်ခုစလုံးကို scrollbar တစ်ခုထပ်ထည့်မည်ကို သတိပြုပါ (သင်မလိုအပ်လျှင်ပင်)
ဥပမာ
div {
overflow: scroll;
}
overflow: အလိုအလျောက်
auto
တန်ဖိုးသည် တူညီ scroll
သော်လည်း လိုအပ်သည့်အခါမှသာ scrollbars များကို ပေါင်းထည့် သည် -
ဥပမာ
div {
overflow: auto;
}
overflow-x နှင့် overflow-y
အလျားလိုက် သို့မဟုတ် ဒေါင်လိုက် (သို့) နှစ်မျိုးလုံးတွင် အကြောင်းအရာ၏ လွှမ်းခြုံမှုကို ပြောင်းလဲရန် overflow-x
နှင့် ဂုဏ်သတ္တိများက သတ်မှတ်သည်-overflow-y
overflow-x
အကြောင်းအရာ၏ ဘယ်/ညာ အစွန်းများဖြင့် ဘာလုပ်ရမည်ကို သတ်မှတ်သည်။
overflow-y
အကြောင်းအရာ၏ အပေါ်/အောက် အစွန်းများနှင့် ဘာလုပ်ရမည်ကို သတ်မှတ်သည်။
ဥပမာ
div {
overflow-x: hidden; /* Hide horizontal scrollbar
*/
overflow-y: scroll; /* Add vertical scrollbar */
}
CSS Overflow Properties အားလုံး
Property | Description |
---|---|
overflow | Specifies what happens if content overflows an element's box |
overflow-wrap | Specifies whether or not the browser can break lines with long words, if they overflow its container |
overflow-x | Specifies what to do with the left/right edges of the content if it overflows the element's content area |
overflow-y | Specifies what to do with the top/bottom edges of the content if it overflows the element's content area |