Хусусияти 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,
ки қисмҳои берунбарояндаро ба тарафи амудӣ мебурад