CSS ကျူတိုရီရယ်

CSS ပင်မစာမျက်နှာ CSS နိဒါန်း CSS Syntax CSS ရွေးချယ်မှုများ CSS လုပ်နည်း CSS မှတ်ချက်များ CSS အရောင်များ CSS နောက်ခံများ CSS နယ်နိမိတ်များ CSS အနားသတ်များ CSS Padding CSS အမြင့်/အနံ CSS Box မော်ဒယ် CSS အကြမ်းဖျင်း CSS စာသား CSS ဖောင့်များ CSS အိုင်ကွန်များ CSS လင့်ခ်များ CSS စာရင်းများ CSS ဇယားများ CSS Display CSS Max-အကျယ် CSS ရာထူး CSS Z အညွှန်း CSS Overflow CSS Float CSS Inline-block CSS ကို ချိန်ညှိပါ။ CSS Combinators CSS Pseudo-class CSS Pseudo-ဒြပ်စင် CSS Opacity CSS Navigation Bar CSS Dropdowns CSS ရုပ်ပုံပြခန်း CSS Image Sprites CSS Attr ရွေးချယ်မှုများ CSS ပုံစံများ CSS ကောင်တာများ CSS ဝဘ်ဆိုဒ် အပြင်အဆင် CSS ယူနစ်များ CSS တိကျမှု CSS !အရေးကြီးသည်။ CSS သင်္ချာလုပ်ဆောင်ချက်များ

CSS အဆင့်မြင့်

CSS Rounded Corners CSS Border ပုံများ CSS နောက်ခံများ CSS အရောင်များ CSS အရောင်သော့ချက်စာလုံးများ CSS Gradients CSS Shadows CSS စာသားအကျိုးသက်ရောက်မှုများ CSS ဝဘ်ဖောင့်များ CSS 2D အသွင်ပြောင်းမှုများ CSS 3D အသွင်ပြောင်းမှုများ CSS အသွင်ကူးပြောင်းမှုများ CSS Animations CSS Tooltips CSS စတိုင်ပုံများ CSS Image Reflection CSS object-fit CSS object-position CSS Masking CSS ခလုတ်များ CSS Pagination CSS ကော်လံမျိုးစုံ CSS User Interface CSS အပြောင်းအလဲများ CSS Box Sizing CSS မီဒီယာမေးခွန်းများ CSS MQ နမူနာများ CSS Flexbox

CSS တုံ့ပြန်မှု

RWD မိတ်ဆက် RWD Viewport RWD Grid View RWD မီဒီယာမေးခွန်းများ RWD ပုံများ RWD ဗီဒီယိုများ RWD မူဘောင်များ RWD နမူနာများ

CSS Grid

Grid Intro ဂရစ်ကွန်တိန်နာ ဇယားကွက်

CSS SASS

SASS ကျူတိုရီရယ်

CSS နမူနာများ

CSS Templates များ CSS နမူနာများ css စာမေးပွဲ CSS လေ့ကျင့်ခန်းများ CSS လက်မှတ်

CSS ကိုးကားချက်များ

CSS အကိုးအကား CSS ရွေးချယ်မှုများ CSS လုပ်ဆောင်ချက်များ CSS အကိုးအကား Aural CSS ဝဘ်ဘေးကင်းသောဖောင့်များ CSS Animatable CSS ယူနစ်များ CSS PX-EM Converter CSS အရောင်များ CSS အရောင်တန်ဖိုးများ CSS မူရင်းတန်ဖိုးများ CSS Browser ပံ့ပိုးမှု

CSS Layout - အလျှံပယ်


CSS overflowပိုင်ဆိုင်မှုသည် ဧရိယာတစ်ခုနှင့် အံဝင်ခွင်ကျမဖြစ်နိုင်သော ကြီးလွန်းသော အကြောင်းအရာနှင့် ဖြစ်ပျက်မှုများကို ထိန်းချုပ်သည်။

ဤစာသားသည် အမှန်တကယ်ရှည်လျားပြီး ၎င်း၏ကွန်တိန်နာ၏ အမြင့်မှာ 100 pixels သာရှိသည်။ ထို့ကြောင့်၊ စာဖတ်သူကို အကြောင်းအရာကို လှိမ့်ရန် ကူညီပေးရန်အတွက် scrollbar တစ်ခု ထပ်ထည့်ထားသည်။ နာကျင်မှုက အချစ်ပဲ။ အဲဒါက နည်းနည်းလေးမှ ဖြစ်လာတာဆိုတော့ ကျွန်တော်တို့ရဲ့ ပုံမှန်အလေ့အကျင့်က အကျိုးဆက်တွေကို အခွင့်ကောင်းယူဖို့၊ အိုလံပစ်ပွဲတော်ဗျူရိုမှာ နာကျင်ကိုက်ခဲမှု ဒါမှမဟုတ် အိုလံပစ်ပွဲတော်ဗျူရိုမှာ ဝေဒနာက နောက်ဆက်တွဲဆိုးကျိုးတွေကို အနှောက်အယှက်ဖြစ်စေချင်တာ ဒါမှမဟုတ် အမှန်အတိုင်းပြောရရင် eu ခုခံအားစနစ်ရဲ့ နာကျင်မှုကို ခံစားနေရတာ၊ စားသုံးသူနှင့် zzril ၏ပုံမှန်မုန်းတီးမှု။ ကျွန်ုပ်တို့၏ ဆယ်ကျော်သက်များမှ လွတ်မြောက်လာသောအခါ အားလပ်ချိန်သည် ရွေးချယ်စရာမရှိပေ။ အမျိုးအစားများသည် မွေးရာပါ ရှင်းလင်းမှုမရှိပါ။ယင်းသည် ၎င်းတို့၏ ရှင်းလင်းပြတ်သားမှုကို ဖန်တီးသော စာဖတ်သူအတွက် အသုံးပြုခြင်းဖြစ်သည်။


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 ပြင်ပသို့ ပြန်ထုတ်ပေးသည်ဟု ဆိုလိုသည်-

အပြင်အဆင်ကို ပိုမိုကောင်းမွန်စွာ ထိန်းချုပ်လိုပါက overflow property ကို သုံးနိုင်သည်။ အကြောင်းအရာတစ်ခု၏ အကွက်တစ်ခု ပြည့်သွားပါက လျှံမှုဆိုင်ရာ ပိုင်ဆိုင်မှုသည် မည်ကဲ့သို့ဖြစ်မည်ကို သတ်မှတ်သည်။

ဥပမာ

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}


overflow: ဝှက်ထားသည်။

တန်ဖိုး ဖြင့် hidden၊ ပြည့်လျှံမှုကို ဖြတ်တောက်ပြီး ကျန်အကြောင်းအရာများကို ဝှက်ထားသည်-

ဥပမာ

div {
  overflow: hidden;
}

overflow: scroll

တန်ဖိုးကို သတ်မှတ်ခြင်း scroll၊ ပြည့်လျှံမှုကို ဖြတ်တောက်ပြီး ဘောက်စ်အတွင်း လှိမ့်ရန်အတွက် Scrollbar တစ်ခုကို ပေါင်းထည့်ထားသည်။ ၎င်းသည် အလျားလိုက်နှင့် ဒေါင်လိုက် နှစ်ခုစလုံးကို scrollbar တစ်ခုထပ်ထည့်မည်ကို သတိပြုပါ (သင်မလိုအပ်လျှင်ပင်)

အပြင်အဆင်ကို ပိုမိုကောင်းမွန်စွာ ထိန်းချုပ်လိုပါက overflow property ကို သုံးနိုင်သည်။ အကြောင်းအရာတစ်ခု၏ အကွက်တစ်ခု ပြည့်သွားပါက လျှံမှုဆိုင်ရာ ပိုင်ဆိုင်မှုသည် မည်ကဲ့သို့ဖြစ်မည်ကို သတ်မှတ်သည်။

ဥပမာ

div {
  overflow: scroll;
}

overflow: အလိုအလျောက်

autoတန်ဖိုးသည် တူညီ scrollသော်လည်း လိုအပ်သည့်အခါမှသာ scrollbars များကို ပေါင်းထည့် သည် -

အပြင်အဆင်ကို ပိုမိုကောင်းမွန်စွာ ထိန်းချုပ်လိုပါက overflow property ကို သုံးနိုင်သည်။ အကြောင်းအရာတစ်ခု၏ အကွက်တစ်ခု ပြည့်သွားပါက လျှံမှုဆိုင်ရာ ပိုင်ဆိုင်မှုသည် မည်ကဲ့သို့ဖြစ်မည်ကို သတ်မှတ်သည်။

ဥပမာ

div {
  overflow: auto;
}

overflow-x နှင့် overflow-y

အလျားလိုက် သို့မဟုတ် ဒေါင်လိုက် (သို့) နှစ်မျိုးလုံးတွင် အကြောင်းအရာ၏ လွှမ်းခြုံမှုကို ပြောင်းလဲရန် overflow-xနှင့် ဂုဏ်သတ္တိများက သတ်မှတ်သည်-overflow-y

overflow-xအကြောင်းအရာ၏ ဘယ်/ညာ အစွန်းများဖြင့် ဘာလုပ်ရမည်ကို သတ်မှတ်သည်။
overflow-yအကြောင်းအရာ၏ အပေါ်/အောက် အစွန်းများနှင့် ဘာလုပ်ရမည်ကို သတ်မှတ်သည်။

အပြင်အဆင်ကို ပိုမိုကောင်းမွန်စွာ ထိန်းချုပ်လိုပါက overflow property ကို သုံးနိုင်သည်။ အကြောင်းအရာတစ်ခု၏ အကွက်တစ်ခု ပြည့်သွားပါက လျှံမှုဆိုင်ရာ ပိုင်ဆိုင်မှုသည် မည်ကဲ့သို့ဖြစ်မည်ကို သတ်မှတ်သည်။

ဥပမာ

div {
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: scroll; /* Add vertical scrollbar */
}

လေ့ကျင့်ခန်းများဖြင့် သင့်ကိုယ်သင် စမ်းသပ်ပါ။

လေ့ကျင့်ခန်း

class="intro".

<style>
.intro {
  width: 200px;
  height: 70px;
  : ;
}
</style>

<body>

<div class="intro">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum,
nisi lorem egestas odio,
vitae scelerisque enim ligula venenatis dolor. </div> </body>


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