Depășire (overflow) în direcții specifice
Proprietățile overflow-x și overflow-y vă permit să controlați depășirea separat pentru direcțiile orizontală și verticală.
CSS overflow-x și overflow-y
Proprietățile overflow-x și overflow-y setează ce se întâmplă cu depășirea doar pe orizontală sau doar pe verticală (sau ambele).
overflow-xgestionează marginile din stânga și din dreapta ale conținutului.overflow-ygestionează marginile de sus și de jos ale conținutului.
Exemplu
Bara de derulare orizontală este ascunsă și se adaugă o bară de derulare verticală.
Prompt
O pagină HTML care ascunde bara de derulare orizontală și afișează una verticală.
Într-un bloc intern
<style>, dă unui <div> o lățime, o înălțime și un fundal coral, cu overflow-x hidden și overflow-y scroll. Pune mai mult text în interior decât încape pe verticală.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 200px;
height: 100px;
background-color: coral;
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}
</style>
</head>
<body>
<div>You can use the overflow property when you want better control of the layout. The overflow property specifies what happens if content overflows an element's box. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
</body>
</html>
Cazuri de utilizare comune
Aceste proprietăți sunt utile atunci când aveți nevoie de comportamente diferite de derulare în fiecare direcție, de exemplu: overflow-x: auto pentru tabele late, overflow-y: scroll pentru ferestre de chat și overflow-x: auto pentru blocuri de cod cu linii lungi.
Exemplu
Se afișează doar o bară de derulare orizontală.
Prompt
O pagină HTML care afișează doar o bară de derulare orizontală.
Într-un bloc intern
<style>, dă unui <div> o lățime, o înălțime și un fundal coral, cu overflow-x scroll și overflow-y hidden, și păstrează textul pe un singur rând (white-space nowrap) astfel încât să depășească pe orizontală.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 200px;
height: 100px;
background-color: coral;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<div>You can use the overflow property when you want better control of the layout. This long line of text stays on one line and scrolls sideways.</div>
</body>
</html>