word-break ဂုဏ်သတ္တိ

word-break ဂုဏ်သတ္တိသည် ကွန်တိန်နာ၏အကျယ်ထဲသို့ မဝင်နိုင်သော စကားလုံးတစ်လုံး၏ စာလုံးများကို လိုင်းအသစ်သို့ ကူးပြောင်းခွင့်ပြုပါသည်။

ဝါကျဖွဲ့ပုံ

selector {
	word-break: break-all | keep-all | normal;
}

တန်ဖိုး	ဖော်ပြချက်
`break-all`	ကွန်တိန်နာထဲသို့ မနေရာချနိုင်သော ရှည်လျားသည့်စကားလုံးများကို လိုင်းအသစ်သို့ ကူးပြောင်းစေပါသည်။
`keep-all`	အက္ခရာပုံစံဘာသာစကားများ (ဥပမာ- တရုတ်၊ ဂျပန်၊ ကိုရီးယား) အတွက် ကူးပြောင်းခြင်းအတွက်ဖြစ်ပါသည်။
`normal`	စံအပြုအမူ - ရှည်လျားသောစကားလုံးသည် ကွန်တိန်နာ၏အကျယ်ထဲသို့ မဝင်နိုင်ပါက ၎င်း၏နယ်နိမိတ်ကို ကျော်လွန်ထွက်သွားမည်ဖြစ်သည် (ဤအခါတွင် လိုင်းအသစ်မှ စတင်မည်)။

ပုံမှန်တန်ဖိုး - normal.

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

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

#elem {
	width: 200px;
	word-break: normal;
	border: 1px solid red;
}

ယခုတော့ နေရာမကျနိုင်သော စာလုံးများသည် လာမည့်လိုင်းသို့ ကူးပြောင်းသွားမည်ဖြစ်သည်။

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

#elem {
	width: 200px;
	word-break: break-all;
	border: 1px solid red;
}

overflow-wrap ဂုဏ်သတ္တိ,
ထိုဂုဏ်သတ္တိသည်လည်း ရှည်လျားသောစကားလုံး၏ စာလုံးများကို လိုင်းအသစ်သို့ ကူးပြောင်းခွင့်ပြုပါသည်
hyphens ဂုဏ်သတ္တိ,
ထိုဂုဏ်သတ္တိသည် စကားလုံးများကို အသံထွက်အပိုင်းအလိုက် ကူးပြောင်းခြင်းကို ဖွင့်ပေးပါသည်
overflow ဂုဏ်သတ္တိ,
ထိုဂုဏ်သတ္တိသည် ဘလောက်၏နယ်နိမိတ်ကို ကျော်လွန်ထွက်သွားသော အပိုင်းများကို ဖြတ်တောက်ပေးပါသည်
wbr တဂ်,
ထိုတဂ်သည် HTML နည်းလမ်းများဖြင့် ပျော့ပျောင်းသောကူးပြောင်းခြင်းများကို အကောင်အထည်ဖော်ပေးပါသည်
br တဂ်,
ထိုတဂ်ဖြင့် စာသားကို လိုင်းအသစ်သို့ အတင်းအကျပ် ကူးပြောင်းစေနိုင်ပါသည်