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 қасиеті,
тігінен шығып тұрған бөліктерді қиып алады