Proprietatea CSS overflow
Proprietatea overflow controlează ce se întâmplă cu conținutul care este prea mare pentru a încăpea în zona sa. Ea decide dacă conținutul este tăiat sau dacă se adaugă bare de derulare.
Poate avea aceste valori:
visible— valoarea implicită. Conținutul care depășește nu este tăiat și se revarsă în afara casetei.hidden— conținutul care depășește este tăiat și ascuns.scroll— barele de derulare sunt mereu adăugate.auto— ca scroll, dar barele de derulare sunt adăugate doar când este nevoie.
CSS overflow: visible
Implicit, overflow este visible, astfel încât conținutul nu este tăiat și se afișează în afara casetei elementului.
Exemplu
Conținutul suplimentar se revarsă în afara casetei corale.
<style>, dă unui <div> lățime 200px, înălțime 65px, un fundal coral și overflow visible. Pune mai mult text în interior decât încape, astfel încât conținutul să depășească marginile casetei.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 200px;
height: 65px;
background-color: coral;
overflow: visible;
}
</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.</div>
</body>
</html>
CSS overflow: hidden
Cu hidden, conținutul care depășește este tăiat, iar restul conținutului este ascuns.
Exemplu
Conținutul care nu încape este tăiat.
<style>, dă unui <div> lățime 200px, înălțime 65px, un fundal coral și overflow hidden. Pune mai mult text în interior decât încape, astfel încât conținutul suplimentar este tăiat și ascuns.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 200px;
height: 65px;
background-color: coral;
overflow: hidden;
}
</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.</div>
</body>
</html>
CSS overflow: scroll
Cu scroll, atât bara de derulare orizontală, cât și cea verticală sunt mereu adăugate, astfel încât utilizatorul să poată derula pentru a vedea tot conținutul.
Exemplu
Barele de derulare sunt mereu afișate pe casetă.
<style>, dă unui <div> lățime 200px, înălțime 65px, un fundal coral și overflow scroll, astfel încât barele de derulare să fie mereu afișate. Pune mai mult text în interior decât încape.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 200px;
height: 65px;
background-color: coral;
overflow: scroll;
}
</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.</div>
</body>
</html>
CSS overflow: auto
Valoarea auto este ca scroll, dar adaugă bare de derulare doar atunci când sunt necesare.
Exemplu
O bară de derulare apare doar pentru că trebuie, deoarece conținutul depășește caseta.
<style>, dă unui <div> lățime 200px, înălțime 65px, un fundal coral și overflow auto, astfel încât barele de derulare apar doar când este nevoie. Pune mai mult text în interior decât încape.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 200px;
height: 65px;
background-color: coral;
overflow: auto;
}
</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.</div>
</body>
</html>