Свойство overflow

Свойство overflow браузерга блок чегарасидан (унинг эни ва бўйидан) чиқиб қолган контент (матн, расмлар, бошқа блоклар) билан нима қилишни кўрсатади. Браузер чиқиб қолган қисмини беркитиши, сергичмоч туғмалар қўшиши ёки ҳеч нарса қилмаслиги мумкин (чегаралардан чиқиб қолган ҳолида қолдириш).

Синтаксис

cssселектор {
  overflow: hidden | scroll | auto | visible;
}

Қийматлар

Стандарт қиймат: visible.

Мисол . Visible қиймати

Бу мисолда juda uzun soʻz контейнерга сиғмайди ва унинг чегараларидан чиқиб кетади. Қисиш юз бермайди:

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;
}

Результат:

Шунингдек қаранг