El desbordamiento de CSS controla el gran contenido. Indica si se debe recortar el contenido o agregar barras de desplazamiento. El desbordamiento contiene la siguiente propiedad:
- visible
- oculto
- Desplazarse
- auto
Visible: el contenido no se recorta y es visible fuera del cuadro del elemento.
Ejemplo:
html
<!DOCTYPE>
<html>
<head>
<style>
p {
width:100px;
height:80px;
border:1px solid;
overflow:visible;
}
</style>
</head>
<body>
<h2>
GEEKSFORGEEKS
</h2>
<p>
The CSS overflow controls big content.
It tells whether to clip content or to add scroll bars.
</p>
</body>
</html>
Producción:
Oculto: el desbordamiento se recorta y el resto del contenido es invisible.
Ejemplo:
html
<!DOCTYPE>
<html>
<head>
<style>
p {
width:100px;
height:80px;
border:1px solid;
overflow:hidden;
}
</style>
</head>
<body>
<h2>
GEEKSFORGEEKS
</h2>
<p>
The CSS overflow controls big content.
It tells whether to clip content or to add scroll bars.
</p>
</body>
</html>
Producción:
Desplazamiento: el desbordamiento se recorta pero se agrega una barra de desplazamiento para ver el resto del contenido. La barra de desplazamiento puede ser horizontal o vertical.
Ejemplo:
html
<!DOCTYPE>
<html>
<head>
<style>
p {
width:120px;
height:100px;
border:1px solid;
overflow:scroll;
}
</style>
</head>
<body>
<h2>
GEEKSFORGEEKS
</h2>
<p>
The CSS overflow controls big content.
It tells whether to clip content or to add scroll bars.
</p>
</body>
</html>
Producción:
Auto: Agrega automáticamente una barra de desplazamiento cada vez que se requiere.
Ejemplo:
html
<!DOCTYPE>
<html>
<head>
<style>
p {
width:120px;
height:100px;
border:1px solid;
overflow:auto;
}
</style>
</head>
<body>
<h2>
GEEKSFORGEEKS
</h2>
<p>
The CSS overflow controls big content.
It tells whether to clip content or to add scroll bars.
</p>
</body>
</html>
Producción:
Overflow-x y Overflow-y: esta propiedad especifica cómo cambiar el desbordamiento de elementos. x se ocupa de los bordes horizontales y y se ocupa de los bordes verticales.
Ejemplo:
html
<!DOCTYPE>
<html>
<head>
<style>
p {
width:120px;
height:100px;
border:1px solid;
overflow-x:scroll;
overflow-y:hidden;
}
</style>
</head>
<body>
<h2>
GEEKSFORGEEKS
</h2>
<p>
The CSS overflow controls big content.
It tells whether to clip content or to add scroll bars.
</p>
</body>
</html>
Producción:
Navegador compatible:
- Google cromo 1
- Borde 12
- explorador de Internet 4
- Firefox 1
- Ópera 7
- Safari 1
Publicación traducida automáticamente
Artículo escrito por SrishtiGoel y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA