Propiedad CSS overflow
La propiedad overflow define el comportamiento del contenido que desborda la caja del elemento. Esta propiedad solo funciona en elementos de bloque que tienen una altura especificada.
Especifica si el contenido debe recortarse para ajustarse a la caja o si deben añadirse barras de desplazamiento al elemento.
Es una abreviatura de las siguientes propiedades:
El contenido desborda cuando el contenedor tiene una height y una width establecidas.
La propiedad overflow tiene los siguientes valores:
- visible
- hidden
- scroll
- auto
- overlay
DANGER
El valor "Overlay" está obsoleto.
Uno de los usos de establecer overflow es limpiar floats. Sin embargo, establecer overflow no clear el float en el elemento. El elemento con overflow con un valor distinto de "visible" se expandirá tanto como sea necesario para incluir los elementos flotantes secundarios dentro de él, suponiendo que no se haya declarado la altura.
La propiedad overflow también puede crear un contexto de formato de bloque. Es útil en los casos en que queremos alinear un elemento de bloque junto a un elemento flotante.
| Initial Value | visible |
|---|---|
| Applies to | Block containers, flex containers and grid containers. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS2 |
| DOM Syntax | Object.style.overflow = "auto"; |
Sintaxis
Sintaxis CSS de overflow
css
overflow: visible | hidden | scroll | auto | overlay | initial | inherit;Ejemplo de la propiedad overflow con el valor "visible":
Ejemplo de código CSS overflow
html
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: #ccc;
width: 300px;
height: 200px;
overflow: visible;
}
</style>
</head>
<body>
<h2>Ejemplo de la propiedad Overflow</h2>
<h3>overflow: visible</h3>
<p>Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>Resultado
Ejemplo de la propiedad overflow con el valor "scroll":
Ejemplo de CSS overflow scroll
html
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: #ccc;
width: 300px;
height: 200px;
overflow: scroll;
}
</style>
</head>
<body>
<h2>Ejemplo de la propiedad Overflow</h2>
<h3>overflow: scroll</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>En el siguiente ejemplo, el valor aplicado recorta el contenido para que encaje en la caja.
Ejemplo de la propiedad overflow con el valor "hidden":
Ejemplo de CSS overflow hidden
html
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: #ccc;
width: 300px;
height: 200px;
overflow: hidden;
}
</style>
</head>
<body>
<h2>Ejemplo de la propiedad Overflow</h2>
<h3>overflow: hidden</h3>
<p>Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>Ejemplo de la propiedad overflow con el valor "auto":
CSS overflow auto
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.scroll {
width: 200px;
height: 300px;
border: 1px solid;
overflow: auto;
margin-bottom: 10px;
}
.scroll-x {
width: 200px;
height: 300px;
border: 1px solid;
overflow-x: auto;
overflow-y: hidden;
margin-bottom: 10px;
}
.scroll-y {
width: 200px;
height: 300px;
border: 1px solid;
overflow-y: auto;
margin-bottom: 10px;
}
.scroll>div {
width: 400px;
height: 50px;
background: #ccc;
}
.scroll-y>div {
width: 200px;
height: 50px;
background: #ccc;
}
.scroll-x>div {
width: 400px;
height: 50px;
background: #ccc;
overflow: hidden;
}
</style>
</head>
<body>
<h1>Ejemplo con la propiedad Overflow</h1>
<h2>overflow overflow scroll auto</h2>
<div class="scroll">
<h2>Propiedad Overflow </h2>
<div>
<h2>propiedad overflow scroll</h2>
</div>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<h2>overflow overflow-x auto</h2>
<div class="scroll-x">
<h2>Propiedad Overflow </h2>
<div>
<h2>propiedad overflow scroll-x</h2>
</div>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer.
</p>
</div>
<h2>overflow overflow-y auto</h2>
<div class="scroll-y">
<h2>Propiedad Overflow </h2>
<div>
<h2>propiedad overflow scroll-y</h2>
</div>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. software like Aldus PageMaker including versions of Lorem Ipsum.but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</body>
</html>Ejemplo de la propiedad overflow con todos los valores:
Ejemplo de CSS overflow con todos los valores
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.scroll {
background-color: #eee;
width: 300px;
height: 200px;
overflow: scroll;
}
div.hidden {
background-color: #eee;
width: 300px;
height: 200px;
overflow: hidden;
}
div.auto {
background-color: #eee;
width: 300px;
height: 200px;
overflow: auto;
}
div.visible {
background-color: #eee;
width: 300px;
height: 200px;
overflow: visible;
}
div.overlay {
background-color: #eee;
width: 300px;
height: 200px;
overflow: overlay;
}
</style>
</head>
<body>
<h2>Ejemplo de la propiedad Overflow</h2>
<h3>overflow: scroll</h3>
<div class="scroll">
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1 500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<h3>overflow: hidden</h3>
<div class="hidden">
Lorem Ipsum is the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<h3>overflow: auto</h3>
<div class="auto">
Lorem Ipsum is the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<h3>overflow: visible</h3>
<div class="visible">
Lorem Ipsum is the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<br />
<br />
<h3>overflow: overlay</h3>
<div class="overlay">
Lorem Ipsum is the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Valores
| Value | Description | Play it |
|---|---|---|
| visible | El contenido no se recorta y se renderiza fuera de la caja de relleno. Este es el valor predeterminado de esta propiedad. | Play it » |
| hidden | El contenido se recorta para ajustarse a la caja de relleno. | Play it » |
| scroll | Se añade la barra de desplazamiento para ver el resto del contenido. | Play it » |
| auto | Depende del navegador. Si el contenido desborda, se añade una barra de desplazamiento. | Play it » |
| overlay | Funciona igual que auto, pero con las barras de desplazamiento dibujadas sobre el contenido en lugar de ocupar espacio. Este valor obsoleto ya no debe usarse, aunque puede seguir funcionando. | Play it » |
| initial | Hace que la propiedad use su valor predeterminado. | Play it » |
| inherit | Hereda la propiedad del elemento padre. |
Practice
What does the CSS overflow property do?