La propiedad overflow-x en CSS especifica si agregar una barra de desplazamiento, recortar el contenido o mostrar el contenido de desbordamiento de un elemento de nivel de bloque, cuando se desborda en los bordes izquierdo y derecho.
En otras palabras, esta propiedad nos ayuda a mostrar el contenido que se desborda de la página de forma horizontal.
El valor predeterminado de la propiedad overflow-x está visible. Esta propiedad CSS no se puede animar.
Sintaxis:
overflow-x: visible|hidden|scroll|auto|initial|inherit;
Valores de propiedad:
- visible: esta propiedad no recorta el contenido. El contenido puede mostrarse fuera de los bordes izquierdo y derecho.
- oculto: se utiliza para recortar el contenido y no se proporciona ningún mecanismo de desplazamiento.
- scroll: se utiliza para recortar el contenido y proporcionar un mecanismo de desplazamiento.
- auto: proporciona un mecanismo de desplazamiento para cuadros desbordados.
- initial: esta propiedad se utiliza para establecer la propiedad overflow-x en su valor predeterminado.
- heredar: esta propiedad se hereda de su padre.
Ejemplo
html
<!DOCTYPE html>
<html>
<head>
<style>
div.example1 {
background-color: green;
width: 80px;
overflow-x: scroll;
}
div.example2 {
background-color: green;
width: 80px;
overflow-x: hidden;
}
div.example3 {
background-color:green;
width: 80px;
overflow-x: auto;
}
div.example4 {
background-color: green;
width: 80px;
overflow-x: visible;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>
The overflow-x property specifies whether to
clip the content, add a scroll bar, or display
overflow content of a block-level element,
when it overflows at the left and right edges.
</p>
<h2>overflow-x: scroll:</h2>
<div class="example1">
GeeksforGeeks computer science portal
</div>
<h2>overflow-x: hidden:</h2>
<div class="example2">
GeeksforGeeks computer science portal
</div>
<h2>overflow-x: auto:</h2>
<div class="example3">
GeeksforGeeks computer science portal
</div>
<h2>overflow-x: visible (default):</h2>
<div class="example4">
GeeksforGeeks computer science portal
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad overflow-x se enumeran a continuación:
- Google Chrome 1.0
- Borde 12
- Internet Explorer 5.0
- Firefox 3.5
- Safari 3.0
- Ópera 9.5
Publicación traducida automáticamente
Artículo escrito por chaitanyashah707 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA