Overflow häsiýeti

overflow häsiýeti brauzere, blokyň çäklerinden (eni ýa-da beýikliginden) daşyndan çykýan mazmun (tekst, suratlar, beýleki bloklar) bilen näme etmelidigini görkezýär. Brauzer daşyndan çykýan bölegi gizlap bilýär, süýşürmä zolaklaryny goşup bilýär ýa-da hiç zat etmän galdyrap bilýär (ýagdaýynda galdyrýar - çäklerden daşyndan çykýan).

Sintaksis

cssselektor {
  overflow: hidden | scroll | auto | visible;
}

Bahalar

Bölüp bermegiň bahasy: visible.

Mysal . Visible bahasy

Bu mysalda gaty uzyn söz konteýnera ýerleşmez we onuň çäklerinden daşyndan çykar. Kesip aýyrmak bolmaýar:

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

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

Результат:

Mysal . Visible bahasy

Indi diňe eni çäklendirilmedik, eýsem beýikligi hem çäklendirildi (tekst blokdan daşyndan çykar we beýiklikde):

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

Результат:

Mysal . Hidden bahasy

Indi konteýneriň çäklerinden daşyndan çykan ähli zat ýöne kesilip aýyrylar (beýiklikde hem). Üns beriň beýiklikde kesip aýyrmak diňe açyk görkezilen ýagdaýda bolýar. Ýok bolsa tekst konteýneri beýiklikde giňeldýär - we hiç hili kesip aýyrmak bolmaz:

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

Результат:

Mysal . Scroll bahasy

scroll bahasy bilen süýşürmä zolaklary hemme wagty bolar, hatda hiç zat daşyndan çykmasa-da (bu ýagdaýda olar hereketsiz bolar). Indi tekst na ende, na beýiklikde daşyndan çykmaýar, ýöne süýşürmä zolaklary bar (hereketsiz):

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

Результат:

Mysal . Auto bahasy

auto bahasy bilen süýşürmä zolaklary diňe gerek bolsa goşulýar, eger mazmun konteýnerden daşyndan çyksa. Indi olar ýok, sebäbi hemmesi ýerleşýär:

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

Результат:

Mysal . Auto bahasy

Indi bolsa eni çäklendireris - göni süýşürmä zolagy peýda bolar:

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

Результат:

Şeýle-de görüň