white-space ဂုဏ်သတ္တိ

white-space ဂုဏ်သတ္တိသည် စာသားကို လိုင်းအသစ်သို့ မည်သို့ကျော်ရမည်၊ ထို့အပြင် စကားလုံးများအကြားနှင့် လိုင်းခွဲများ (ကုဒ်ရိုက်နေစဉ် Enter ကိုနှိပ်ထားသောနေရာများ) ကို မည်သို့ပြသရမည်ကို သတ်မှတ်ပေးသည်။

ဝါကျဖွဲ့ပုံ

ရွေးချယ်မှု {
	white-space: nowrap | pre | pre-line | pre-wrap | normal;
}

တန်ဖိုးများ

တန်ဖိုး	ဖော်ပြချက်
`nowrap`	�ာသားကို ကွန်တိန်နာ၏အကျယ်ထဲတွင် မနေနိုင်သည့်တိုင် (ဤကိစ္စတွင် စာသားသည် ၎င်း၏နယ်နိမိတ်များကို ကျော်လွန်သွားမည်) �ခြားလိုင်းတစ်ခုသို့ ကျော်ရန် တားမြစ်ထားသည်။ သို့သော်၊ `br` တဂ် ထည့်ခြင်းသည် စာသားကို လိုင်းအသစ်သို့ ကျော်စေလိမ့်မည်။
`pre`	ဝဘ်ဆိုက်တစ်ခုကို ဖွဲ့စည်းတည်ဆောက်နေစဉ် နော့တပ်စ်စာအုပ်တွင် ရိုက်ထည့်ထားသည့်အတိုင်း စာသားကိုပြသသည်- နေရာလွတ်အားလုံးနှင့် enter များနှင့်အတူ (ကုဒ်တွင် နေရာလွတ်များစွာ ရိုက်ထည့်ထားပါက စခရင်ပေါ်တွင်လည်း များစွာရှိလိမ့်မည်)။ ထိုအချိန်တွင် ဘရောက်ဆာသည် ကွန်တိန်နာထဲတွင် မနေနိုင်ပါက စာသားကို လိုင်းအသစ်သို့ မကျော်ပါ - စာသားသည် ၎င်း၏နယ်နိမိတ်များကို ကျော်လွန်သွားမည်။ pre တဂ် ၏ တူညီသောအရာ၊ သို့သော် ၎င်းသည် ဖောင့်ကို monospaced အဖြစ် မပြောင်းလဲပါ (monospaced ဖောင့်နှင့် ပတ်သက်၍ ဂုဏ်သတ္တိကို ကြည့်ပါ။ `font-family`.
`pre-wrap`	pre နှင့် တူညီသည်၊ ကွာခြားချက်မှာ စာသားသည် အလွန်ရှည်လျားပြီး ကွန်တိန်နာထဲသို့ မဝင်နိုင်ပါက - ဘရောက်ဆာသည် ၎င်းကို အခြားလိုင်းသို့ ကျော်ပစ်လိမ့်မည်။
`pre-line`	ဘရောက်ဆာသည် HTML ကုဒ်ရှိ Enter များကိုသာ ထည့်သွင်းစဉ်းစားပြီး ကျန်အရာအားလုံးကို လျစ်လျူရှုသည် (နေရာလွတ်များစွာသည် တစ်ခုကဲ့သို့ ပေါ်လာလိမ့်မည်၊ ဘရောက်ဆာသည် လိုင်းခွဲများကို ကိုယ်တိုင်ချထားသည်)။
`normal`	စံအပြုအမူ- ဘရောက်ဆာသည် စကားလုံးများ ကွန်တိန်နာထဲတွင် နေရာချနိုင်ရန် လိုင်းခွဲများကို ကိုယ်တိုင်ချထားသည်။ ကုဒ်ရှိ နေရာလွတ်များစွာသည် ပေါ်လာလိမ့်မည်။ စခရင်ပေါ်တွင် တစ်ခုကဲ့သို့။

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

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

ဤဥပမာတွင် စာသားသည် ကွန်တိန်နာထဲသို့ မဝင်နိုင်ပါ နှင့် ၎င်း၏နယ်နိမိတ်များကို ကျော်လွန်သွားမည်၊ အဘယ်ကြောင့်ဆိုသော် တန်ဖိုး nowrap ကို သတ်မှတ်ထားသောကြောင့်ဖြစ်သည်-

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

#elem {
	width: 200px;
	white-space: nowrap;
	border: 1px solid red;
}

ဥပမာ . nowrap တန်ဖိုးနှင့် br တဂ်

br တဂ်ကို ထည့်ပါက - စာသားသည် ကျော်သွားလိမ့်မည် လိုင်းအသစ်သို့ (အတိအကျသောနေရာတွင်၊ br ရပ်နေသည်)-

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

#elem {
	width: 200px;
	white-space: nowrap;
	border: 1px solid red;
}

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

ဤဥပမာတွင် စာသားကို ပြသထားသည်။ HTML ကုဒ် တည်းဖြတ်သူတွင် ရိုက်ထည့်ထားသည့်အတိုင်း (နှင့်အတူ Tab ခလုတ်ဖြင့် အုပ်စုဝင်အားလုံး၊ Enter နှင့် ထို့နောက်) -

<div id="elem">
	Lorem ipsum

		dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: pre;
	border: 1px solid red;
}

ဥပမာ . pre-wrap တန်ဖိုး

ယခုအခါ စာသားကို ပြသထားသည်။ HTML ကုဒ် တည်းဖြတ်သူတွင် ရိုက်ထည့်ထားသည့်အတိုင်း၊ သို့သော်၊ ထွက်နေသော အပိုင်းများကို လိုင်းအသစ်သို့ ကျော်ပစ်လိုက်သည်-

<div id="elem">
	Lorem ipsum

		dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: pre-wrap;
	border: 1px solid red;
}

ဒီလည်းကြည့်ပါ

ဂုဏ်သတ္တိများ word-break နှင့် overflow-wrap,
ဤသည်များသည် ရှည်လျားသောစကားလုံး၏ စာလုံးများကို လိုင်းအသစ်သို့ ကျော်ခွင့်ပြုသည်
ဂုဏ်သတ္တိ tab-size,
ဤသည်သည် Tab ခလုတ်ဖြင့် ဖန်တီးထားသော အုပ်စုဝင်၏ အရွယ်အစားကို သတ်မှတ်ပေးသည်
ဂုဏ်သတ္တိ hyphens,
ဤသည်သည် စကားလုံးများကို သံတွဲများဖြင့် ခွဲခြားခြင်းကို ဖွင့်ပေးသည်
ဂုဏ်သတ္တိ overflow,
ဤသည်သည် ဘလောက်၏နယ်နိမိတ်ကို ကျော်လွန်နေသော အပိုင်းများကို ဖြတ်တောက်သည်
တဂ် pre,
ဤသည်သည် စာသားကို HTML ကုဒ် တည်းဖြတ်သူတွင် ရိုက်ထည့်ထားသည့်အတိုင်း ပြသသည်