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 කේත එඩිටරයේ ටයිප් කළ පරිදි පෙන්වයි