Why the links are breaking your layout

Anchor Tag (<a>) ရဲ့ ခေါင်းစားစေတဲ့ Overflow ပြဿနာများ

၁။ Inline Element ဖြစ်နေတဲ့ ပြဿနာ (Padding Overflow)

Anchor tag ဟာ ပုံမှန်အားဖြင့် display: inline ဖြစ်ပါတယ်။ ဒါကြောင့် သူ့ကို padding ထည့်လိုက်တဲ့အခါ စာသားက နေရာယူတာ မပြောင်းလဲဘဲ padding က ဘေးက element တွေပေါ် ကျော်တက်သွား (overflow ဖြစ်) တတ်ပါတယ်။

ပြဿနာ: Padding က အပေါ်နဲ့ အောက်က element တွေကို တွန်းမထုတ်ဘဲ ထပ်သွားတာမျိုးပါ။ ဖြေရှင်းနည်း: display: inline-block သို့မဟုတ် display: block ပြောင်းပေးရပါမယ်။

a {
  display: inline-block; /* ဒါမှ padding/margin က ပတ်ဝန်းကျင်ကို သက်ရောက်မှာပါ */
  padding: 20px;
}

---

၂။ Long URL/Word Break ပြဿနာ

Link ထဲမှာ URL အရှည်ကြီးတွေ ထည့်တဲ့အခါ container ရဲ့ အကျယ်ထက် ကျော်ထွက်သွားပြီး layout ပျက်တတ်ပါတယ်။

ပြဿနာ: စာသားက container ဘောင်ကို ဖောက်ထွက်သွားတာပါ။ ဖြေရှင်းနည်း: overflow-wrap သို့မဟုတ် word-break ကို သုံးရပါမယ်။

a {
  display: block;
  width: 200px;
  word-break: break-all; /* စာလုံးကို ဖြတ်ချလိုက်တာ */
  overflow-wrap: break-word; /* နေရာမဆန့်ရင် အောက်ကြောင်းဆင်းတာ */
}

---

၃။ Line Height နဲ့ Vertical Overflow

Text link တစ်ခုက line နှစ်ကြောင်း ဖြစ်သွားတဲ့အခါ background color ဒါမှမဟုတ် underline တွေက တစ်ခုပေါ်တစ်ခု ထပ်နေတာမျိုး (overflow ဖြစ်နေတာမျိုး) ကြုံရတတ်ပါတယ်။

ပြဿနာ: Line-height မလုံလောက်လို့ background တွေ ဆင့်နေတာပါ။ ဖြေရှင်းနည်း: line-height ကို သေချာညှိပေးရပါမယ်။

a {
  background: yellow;
  line-height: 1.6; /* မျဉ်းကြောင်းကြား နေရာလွတ်ပေးတာ */
}

---

၄။ Hidden Overflow နဲ့ Focus Outline

Container မှာ overflow: hidden ပေးထားတဲ့အခါ Link ကို Keyboard နဲ့ Tab ခုန်ကြည့်ရင် Focus ပေးတဲ့ (outline) လေးတွေက အနားသတ်မှာ ပြတ်တောက်သွားတတ်ပါတယ်။ ဒါက Accessibility (a11y) အတွက် မကောင်းပါဘူး။

ဖြေရှင်းနည်း: outline-offset ကို သုံးပြီး outline ကို အတွင်းဘက် နည်းနည်း ရွှေ့ပေးရပါတယ်။

.container {
  overflow: hidden;
}

a:focus {
  outline-offset: -2px; /* Outline ကို အတွင်းဘက် ရောက်စေတာ */
}

---

အနှစ်ချုပ်

Anchor tag ရဲ့ overflow ပြဿနာ အများစုဟာ သူက Inline element ဖြစ်နေလို့ပါ။ ဒါကို inline-block ပြောင်းလိုက်တာနဲ့တင် ပြဿနာတော်တော်များများ ပြေလည်သွားတတ်ပါတယ်။ URL အရှည်ကြီးတွေအတွက်ဆိုရင်တော့ word-break ကို မေ့ထားလို့ မရပါဘူး။