Definición de .overflow utilizado en CSS
La propiedad .overflow
controla lo que sucede con el contenido que se rompe fuera de sus límites: imagine un div en el que se ha establecido explícitamente que tiene 200 px de ancho, pero contiene una imagen de 300 px de ancho. Esa imagen sobresalirá del DIV y será visible de forma predeterminada. Mientras que si establece el valor .overflow
en oculto, la imagen se cortará a 200px.
Ejemplo de empleo : propiedad CSS overflow
Si te gustaría utilizar esta propiedad de CSS en tu hoja styles.css, hazlo de esta forma:
div {
overflow: visible | hidden | scroll | auto | inherit
}
Otro ejemplo más avanzado de .overflow es el siguiente de CODEPEN:
Sintaxis de .overflow en CSS
overflow: visible|hidden|clip|scroll|auto|initial|inherit;
Valores
Valor | Descripción | Manifestación |
---|---|---|
visible | El desbordamiento no se recorta. Representa fuera de la caja del elemento. Esto es predeterminado | |
oculto | El desbordamiento se recorta y el resto del contenido será invisible. El contenido se puede desplazar mediante programación (por ejemplo, configurando scrollLeft o scrollTo()) | |
acortar | El desbordamiento se recorta y el resto del contenido será invisible. Prohíbe el desplazamiento, incluido el desplazamiento programático. | |
Desplazarse | El desbordamiento se recorta, pero se agrega una barra de desplazamiento para ver el resto del contenido | |
auto | Si se recorta el desbordamiento, se debe agregar una barra de desplazamiento para ver el resto del contenido | |
inicial | Establece esta propiedad en su valor predeterminado. | |
heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .overflow
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos de -webkit- especifican la primera versión que funcionó con un prefijo.
Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
overflow-wrap | 23.0 | 18.0 | 49.0 | 6.1 | 12.1 |