overflow ගුුණය

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

වාක්‍ය රීතිය

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

අගයන්

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

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

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

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

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

Результат:

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

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

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

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

Результат:

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

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

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

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

Результат:

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

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

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

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

Результат:

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

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

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

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

Результат:

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

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

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

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

Результат:

මෙයද බලන්න