CSS
Rebosar

Sintaxis

• desbordamiento: visible | oculto | desplazarse auto | inicial | heredar;

Parámetros

Observaciones

desbordamiento: desplazamiento

HTML

<div>
    This div is too small to display its contents to display the effects of the overflow property.
</div>

CSS

div {
    width:100px;
    height:100px;
    overflow:scroll;
}

Resultado

El contenido anterior se recorta en un cuadro de 100px por 100px, con desplazamiento disponible para ver el contenido desbordado.

La mayoría de los navegadores de escritorio mostrarán barras de desplazamiento tanto horizontales como verticales, ya sea que el contenido esté recortado o no. Esto puede evitar problemas con la aparición y desaparición de barras de desplazamiento en un entorno dinámico. Las impresoras pueden imprimir contenido desbordado.

envoltura de desbordamiento

overflow-wrap le dice a un navegador que puede dividir una línea de texto dentro de un elemento específico en varias líneas en un lugar de otro modo irrompible. Útil para evitar que una larga cadena de texto cause problemas de diseño debido al desbordamiento de su contenedor.

CSS

div {
    width:100px;
    outline: 1px dashed #bbb;
}

#div1 {
    overflow-wrap:normal;
}

#div2 {
    overflow-wrap:break-word;
}

HTML

<div id="div1">
      <strong>#div1</strong>: Small words are displayed normally, but a long word like <span style="red;">supercalifragilisticexpialidocious</span> is too long so it will overflow past the edge of the line-break
</div>

<div id="div2">
      <strong>#div2</strong>: Small words are displayed normally, but a long word like <span style="red;">supercalifragilisticexpialidocious</span> will be split at the line break and continue on the next line.
</div>

desbordamiento: visible

HTML

<div>
     Even if this div is too small to display its contents, the content is not clipped.
</div>

CSS

div {
     width:50px;
     height:50px;
     overflow:visible;
}

Resultado

El contenido no se recorta y se procesará fuera del cuadro de contenido si supera su tamaño de contenedor.

Contexto de formato de bloque creado con desbordamiento

El uso de la propiedad de overflow con un valor diferente al visible creará un nuevo contexto de formato de bloque . Esto es útil para alinear un elemento de bloque junto a un elemento flotante.

CSS

img {
    float:left;
    margin-right: 10px;
}
 div {
     overflow:hidden; /* creates block formatting context */
}

HTML

<img src="http://placehold.it/100x100">
<div>
  <p>Lorem ipsum dolor sit amet, cum no paulo mollis pertinacia.</p>
  <p>Ad case omnis nam, mutat deseruisse persequeris eos ad, in tollit debitis sea.</p>
</div>

Resultado

Este ejemplo muestra cómo los párrafos dentro de un div con el conjunto de propiedades de overflow interactuarán con una imagen flotada.

overflow-x y overflow-y

Estas dos propiedades funcionan de manera similar a la propiedad de overflow y aceptan los mismos valores. El parámetro overflow-x solo funciona en el eje x o de izquierda a derecha. El overflow-y funciona en el eje y o de arriba a abajo.

HTML

<div id="div-x">
    If this div is too small to display its contents, 
    the content to the left and right will be clipped.
</div>

<div id="div-y">
    If this div is too small to display its contents, 
    the content to the top and bottom will be clipped.
</div>

CSS

div {
    width: 200px;
    height: 200px;
}

#div-x {
    overflow-x: hidden;
}

#div-y {
    overflow-y: hidden;
}