Overflow xassəsi

overflow xassəsi brauzerə blokun sərhədlərindən (eni və ya hündürlüyü) kənara çıxan məzmunla (mətn, şəkillər, digər bloklar) necə məşğul olacağını göstərir. Brauzer kənara çıxan hissəni gizlədə, sürüşdürmə zolaqları əlavə edə və ya heç nə etməyə bilər (olduğu kimi saxlayar - sərhədlərdən kənara çıxmış halda).

Sintaksis

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

Qiymətlər

Standart qiymət: visible.

Nümunə . Visible qiyməti

Bu nümunədə çox uzun söz konteynerə sığmayacaq və onun sərhədlərindən kənara çıxacaq. Kəsmə baş vermir:

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

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

Результат:

Nümunə . Visible qiyməti

İndi isə təkcə en deyil, hündürlük də məhduddur (mətn blokdan hündürlükdə də kənara çıxacaq):

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

Результат:

Nümunə . Hidden qiyməti

İndi konteynerin sərhədlərindən kənara çıxan hər şey sadəcə kəsiləcək (hündürlükdə də). Diqqət edin ki, hündürlükdə kəsmə yalnız o zaman baş verir ki, o açıq şəkildə təyin olunsun. Əks halda mətn konteyneri hündürlükdə genişləndirir - və heç bir kəsmə baş verməyəcək:

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

Результат:

Nümunə . Scroll qiyməti

scroll qiymətində sürüşdürmə zolaqları həmişə olacaq, hətta heç nə çıxmasa belə (bu halda onlar aktiv olmayacaq). İndi mətn nə enə, nə də hündürlüyə çıxmır, amma sürüşdürmə zolaqları yenə də var (aktiv deyil):

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

Результат:

Nümunə . Auto qiyməti

auto qiymətində sürüşdürmə zolaqları yalnız məzmun konteynerdən kənara çıxdıqda əlavə olunur. İndi onlar yoxdur, çünki hər şey sığı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;
}

Результат:

Nümunə . Auto qiyməti

İndi isə eni məhdudlaşdıraq - üfüqi sürüşdürmə zolağı peyda olacaq:

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

Результат:

Həmçinin bax