overflow ဂုဏ်သတ္တိ

overflow ဂုဏ်သတ္တိသည် ဘလော့ခ်တစ်ခု၏ နယ်နိမိတ်များ (၎င်း၏ အကျယ် သို့မဟုတ် အမြင့်) ကို ကျော်လွန်၍ ထွက်နေသော အကြောင်းအရာ (စာသား၊ ရုပ်ပုံများ၊ အခြားဘလော့ခ်များ) ကို ဘရောက်ဆာက မည်သို့လုပ်ဆောင်ရမည်ကို ညွှန်ပြသည်။ ဘရောက်ဆာသည် ထွက်နေသောအပိုင်းကို ဝှက်ထားနိုင်သည်၊ လှိမ့်ရန် တန်းများ ထည့်ပေးနိုင်သည် သို့မဟုတ် ဘာမျှမလုပ်ဘဲ ထားနိုင်သည် (ထိုအတိုင်း နယ်နိမိတ်များကို ကျော်လွန်၍ ထွက်နေအောင်ထားခြင်း)။

ဝါကျဖွဲ့ပုံ

cssselector {
  overflow: hidden | scroll | auto | visible;
}

တန်ဖိုးများ

စံထားရှိသော တန်ဖိုး: visible.

ဥပမာ . visible တန်ဖိုး

ဤဥပမာတွင် စကားလုံးရှည်ကြီးတစ်လုံးသည် ကွန်တိန်နာအတွင်း၌ မနေရာကျဘဲ ၎င်း၏ နယ်နိမိတ်များကို ကျော်လွန်၍ ထွက်နေမည်။ ဖြတ်တောက်ခြင်း မရှိပါ။

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: visible;
  border: 1px solid red;
  width: 200px;
}

Результат:

ဥပမာ . visible တန်ဖိုး

ယခု အကျယ်သာမက အမြင့်ကိုပါ ကန့်သတ်ထားသည် (စာသားသည် ဘလော့ခ်ကို အမြင့်အားဖြင့်လည်း ကျော်လွန်ထွက်နေမည်)။

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  width: 200px;
  height: 40px;
  overflow: visible;
  border: 1px solid red;
  margin-bottom: 20px;
}

Результат:

ဥပမာ . hidden တန်ဖိုး

ယခု ကွန်တိန်နာ၏ နယ်နိမိတ်များကို ကျော်လွန်ထွက်နေသမျှအားလုံးကို ရိုးရိုးဖြတ်တောက်ပစ်လိုက်မည် (အမြင့်ကိုလည်း ဖြတ်တောက်မည်)။ အမြင့်ကို ထင်ရှားစွာ သတ်မှတ်ထားသည့်အခါမှသာ အမြင့်အားဖြင့် ဖြတ်တောက်ခြင်း ဖြစ်ပေါ်သည်ကို သတိပြုပါ။ ထိုသို့မဟုတ်ပါက စာသားသည် ကွန်တိန်နာကို အမြင့်အားဖြင့် ချဲ့ထွင်ပေးမည် - ထိုအခါ ဖြတ်တောက်ခြင်း မရှိတော့ပါ။

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: hidden;
  width: 200px;
  height: 40px;
  border: 1px solid red;
}

Результат:

ဥပမာ . scroll တန်ဖိုး

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

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: scroll;
  width: 400px;
  height: 100px;
  border: 1px solid red;
}

Результат:

ဥပမာ . auto တန်ဖိုး

auto တန်ဖိုးတွင် အကြောင်းအရာသည် ကွန်တိန်နာကို ကျော်လွန်၍ ထွက်နေမှသာ လှိမ့်ရန် တန်းများကို ထည့်ပေးသည်။ ယခု အရာအားလုံး နေရာကျသောကြောင့် ၎င်းတို့ မရှိပါ။

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: auto;
  width: 400px;
  height: 100px;
  border: 1px solid red;
}

Результат:

ဥပမာ . auto တန်ဖိုး

ယခု အကျယ်ကို ကန့်သတ်လိုက်ပါက - ခြေရာကောက်ရန် လှိမ့်တန်း ပေါ်လာမည်။

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: auto;
  height: 100px;
  border: 1px solid red;
}

Результат:

ဒါကိုလည်း ကြည့်ပါ