overflow ගුුණය

overflow ගුණය බ්ලොක් එකේ මායිම් (එහි පළල හෝ උස) වලින් පිටතට යන අන්තර්ගතය (පෙළ, රූප, වෙනත් බ්ලොක්) සමඟ කුමක් කළ යුතුදැයි බ්රවුසරයට දක්වයි. බ්රවුසරයට පිටතට යන කොටස සඟවා දැමීමට, ස්ක්‍රෝල් තීරු එකතු කිරීමට හෝ කිසිවක් නොකිරීමට (එලෙසම තබා ගැනීමට - මායිම් වලින් පිටතට) හැකිය.

වාක්‍ය රීතිය

තෝරන්නා {
	overflow: hidden | scroll | auto | visible;
}

අගයන්

අගය	විස්තරය
`hidden`	බ්ලොක් එකේ මායිම් වලින් පිටතට යන අන්තර්ගතය සඟවයි.
`scroll`	ස්ක්‍රෝල් තීරු එකතු කරයි, එපමණක් නොව සෑම විටම, කිසිවක් පිටතට නොයන්නේ නම් පවා (මෙම අවස්ථාවේ ඒවා ක්‍රියාකාරී නොවනු ඇත).
`auto`	අවශ්‍ය විට ස්ක්‍රෝල් තීරු එකතු කරයි: අන්තර්ගතය නොගැලපේ නම් - ඒවා දිස්වනු ඇත, සියල්ල ගැලපේ නම් - ඒවා නොතිබේ.
`visible`	බ්ලොක් එකේ මායිම් වලින් පිටතට යන අන්තර්ගතය සඟවන්නේ නැත.

පෙරනිමි අගය: visible.

උදාහරණය . visible අගය

මෙම උදාහරණයේ, ඉතා දිග වචනය භාජනය තුළට නොගැලපේ එහි මායිම් වලින් පිටතට යනු ඇත. කපා දැමීම සිදු නොවේ:

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

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

උදාහරණය . visible අගය

දැන් පළල පමණක් නොව උසද සීමා වී ඇත (පෙළ බ්ලොකයෙන් පිටතට උසින්ද යනු ඇත):

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

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

උදාහරණය . hidden අගය

දැන් භාජනයේ මායිම් වලින් පිටතට යන සියල්ල කපා දමනු ලැබේ (උසින්ද). කෙසේ වෙතත් උසින් කපා දැමීම සිදුවන්නේ එය සෘජුවම නිර්වචනය කළ විට පමණක් බව සැලකිල්ලට ගන්න. එසේ නොමැති නම් පෙළ භාජනය උසින් විහිදුවයි - කිසිදු කපා දැමීමක් සිදු නොවේ:

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

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

උදාහරණය . scroll අගය

scroll අගය සමඟ, ස්ක්‍රෝල් තීරු සෑම විටම පවතිනු ඇත, කිසිවක් පිටතට නොයන්නේ නම් පවා (මෙම අවස්ථාවේ ඒවා ක්‍රියාකාරී නොවනු ඇත). දැන් පෙළ පළලින් හෝ උසින් පිටතට නොයයි, නමුත් ස්ක්‍රෝල් තීරු තවමත් ඇත (ක්‍රියාකාරී නොවන):

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

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

උදාහරණය . auto අගය

auto අගය සමඟ, ස්ක්‍රෝල් තීරු එකතු කරනු ලබන්නේ අන්තර්ගතය භාජනයෙන් පිටතට යන්නේ නම් පමණි. දැන් ඒවා නොමැත, මන්ද සියල්ලම ගැලපේ:

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

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

උදාහරණය . auto අගය

දැන් අපි පළල සීමා කරමු - තිරස් ස්ක්‍රෝල් තීරුව දිස්වනු ඇත:

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

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

මෙයද බලන්න

word-break ගුණය,
දිගු වචනයක අකුරු නව පේළියකට මාරු කරයි
overflow-wrap ගුණය,
දිගු වචනයක අකුරු නව පේළියකට මාරු කරයි
overflow-x ගුණය,
තිරස් අතට පිටතට යන කොටස් කපා දමයි
overflow-y ගුණය,
සිරස් අතට පිටතට යන කොටස් කපා දමයි