En este artículo, veremos cómo configurar la propiedad de desbordamiento para desplazarse en CSS. La propiedad de desbordamiento se usa para controlar el contenido grande. Indica qué hacer cuando el contenido de un elemento es demasiado grande para caber en el área especificada. Cuando la propiedad de desbordamiento está configurada para desplazarse, el desbordamiento se recorta, pero se agrega una barra de desplazamiento para ver el resto.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
width: 120px;
height: 100px;
border: 1px solid;
overflow: scroll;
color: green;
}
</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:
Ejemplo 2: En este ejemplo, tenemos que usar la propiedad overflow-x para desplazarnos. La propiedad overflow-x se usa cuando el contenido se desborda en los bordes izquierdo y derecho.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: green;
width: 40px;
border: 1px solid;
overflow-x: 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 to show rest of the content.
</p>
</body>
</html>
Producción:
Ejemplo 3: En este ejemplo, hemos utilizado la propiedad overflow-y para desplazarse. La propiedad overflow-y se usa cuando el contenido se desborda en los bordes superior e inferior
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: green;
height: 50px;
width: 200px;
border: 1px solid;
overflow-y: 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 to show rest of the content.
</p>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por archnabhardwaj y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA