Proprietatea overflow

Proprietatea overflow indică browserului, cum să procedeze cu conținutul (text, imagini, alte blocuri), care depășește limitele blocului (dincolo de lățimea sau înălțimea sa). Browserul poate ascunde partea care depășește, poate adăuga bare de deplasare sau poate să nu facă nimic (să lase așa cum este - depășind limitele).

Sintaxă

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

Valori

Valoare	Descriere
`hidden`	Ascunde conținutul care depășește limitele blocului.
`scroll`	Adaugă bare de deplasare, întotdeauna, chiar dacă nimic nu depășește (în acest caz ele vor fi inactive).
`auto`	Adaugă bare de deplasare atunci când este necesar: dacă conținutul nu încape - ele vor apărea, dacă totul încape - nu vor fi.
`visible`	Nu ascunde conținutul care depășește limitele blocului.

Valoarea implicită: visible.

Exemplu . Valoarea visible

În acest exemplu, un cuvânt foarte lung nu va încăpea în container și va depăși limitele acestuia. Tăierea nu are loc:

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

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

Exemplu . Valoarea visible

Acum este limitată nu doar lățimea, ci și înălțimea (textul va depăși blocul și pe verticală):

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

Exemplu . Valoarea hidden

Acum, tot ce depășește limitele containerului va fi pur și simplu tăiat (și pe verticală). Acordați atenție faptului că tăierea pe verticală are loc doar atunci când înălțimea este setată explicit. În caz contrar, textul extinde containerul pe verticală - și nicio tăiere nu va avea loc:

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

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

Exemplu . Valoarea scroll

Cu valoarea scroll, barele de deplasare vor fi întotdeauna prezente, chiar dacă nimic nu depășește (în acest caz ele vor fi inactive). Acum textul nu depășește nici pe lățime, nici pe înălțime, dar barele de deplasare sunt totuși prezente (inactive):

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

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

Exemplu . Valoarea auto

Cu valoarea auto, barele de deplasare sunt adăugate doar dacă conținutul depășește containerul. Acum ele nu sunt prezente, deoarece totul încape:

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

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

Exemplu . Valoarea auto

Acum să limităm lățimea - va apărea bara orizontală de deplasare:

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

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

Vezi și

proprietatea word-break,
care transferă literele unui cuvânt lung pe o linie nouă
proprietatea overflow-wrap,
care transferă literele unui cuvânt lung pe o linie nouă
proprietatea overflow-x,
care taie părțile care depășesc pe orizontală
proprietatea overflow-y,
care taie părțile care depășesc pe verticală