Sifa ya overflow

Sifa overflow inabainisha kivinjari, jinsi ya kushughulikia yaliyomo (maandishi, picha, vizuizi vingine), ambavyo vinatoka nje ya mipaka ya kizuizi (kupita upana wake au urefu). Kivinjari kinaweza kuficha sehemu iliyotoka, kuongeza mistari ya kusokota au kufanya chochote (kuiacha kama ilivyo - iliyotoka nje ya mipaka).

Kiambishi

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

Thamani

Thamani	Maelezo
`hidden`	Inaficha yaliyomo yaliyotoka nje ya mipaka ya kizuizi.
`scroll`	Inaongeza mistari ya kusokota, na daima, hata kama hakuna kinachotoka (katika kesi hii hazitawa kaimu).
`auto`	Inaongeza mistari ya kusokota wakati inahitajika: ikiwa yaliyomo hayafiki ndani - itaonekana, ikiwa yote yanafika - haitakuwa.
`visible`	Haifichi yaliyomo yaliyotoka nje ya mipaka ya kizuizi.

Thamani chaguomsingi: visible.

Mfano . Thamani visible

Katika mfano huu neno refu sana halitafika ndani ya chombo na litatoka nje ya mipaka yake. Ukataji hufanyiki:

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

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

Mfano . Thamani visible

Na sasa imewekewa kikomo sio tu upana, bali pia urefu (maandishi yatatoka nje ya kizuizi na kwa urefu):

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

Mfano . Thamani hidden

Sasa kila kitu kilichotoka nje ya mipaka ya chombo kita katawa (na kwa urefu pia). Makini kwa ukweli kwamba ukataji kwa urefu hufanyika tu wakati umepewa wazi. Vinginevyo maandishi yanapanua chombo kwa urefu - na hakuna ukataji wowote utakufanyika:

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

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

Mfano . Thamani scroll

Kwa thamani scroll mistari ya kusokota itakuwa daima, hata kama hakuna kinachotoka (katika kesi hii itakuwa isiyo na uwezo). Sasa maandishi hayatoki wala kwa upana, wala kwa urefu, lakini mistari ya kusokota bado iko (isiyo na uwezo):

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

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

Mfano . Thamani auto

Kwa thamani auto mistari ya kusokota inaongezwa tu, ikiwa yaliyomo yanatoka nje ya chombo. Sasa hayapo, kwani yote yanafika:

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

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

Mfano . Thamani auto

Na sasa tutawekea kikomo upana - mstari wa usokota wa mlalo utaonekana:

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

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

Angalia pia

sifa word-break,
inayohamisha herufi za neno refu kwenye mstari mpya
sifa overflow-wrap,
inayohamisha herufi za neno refu kwenye mstari mpya
sifa overflow-x,
inayokata sehemu zinazotoka kwa mlalo
sifa overflow-y,
inayokata sehemu zinazotoka kwa wima