Compartir a través de


overflow

Establece un valor que indica cómo administrar el contenido del objeto cuando supera el alto y el ancho del objeto.

Sintaxis

{ overflow: sOverflow }

Valores posibles

sOverflow

Cadena que especifica o recibe uno de los valores siguientes:

visible

Valor predeterminado. El contenido no se recorta y no se agregan barras de desplazamiento.

auto

El contenido se recorta y se agrega el desplazamiento solo si es necesario.

hidden

No se muestra el contenido que supera las dimensiones del objeto.

scroll

El contenido se recorta y se agregan las barras de desplazamiento, incluso si el contenido no supera las dimensiones del objeto.

La propiedad tiene el valor predeterminado visible para todos los objetos, con la excepción de textarea, que tiene el valor predeterminado auto. Esta propiedad no se hereda.

Observaciones

El valor predeterminado para el elemento BODY es auto.

Si se establece la propiedad overflow en hidden en un objeto textarea, se ocultan sus barras de desplazamiento.

Si se establece la propiedad overflow en visible, el contenido se recorta al tamaño de la ventana o marco que contiene el objeto.

Ejemplos

En el siguiente ejemplo se usa la propiedad overflow para administrar el contenido del objeto. Se utiliza un estilo en línea para que se ajuste automáticamente al contenido desbordado al cargar la página:

<div id=odiv style="width: 200px; height: 200px; overflow: auto;">
:
</div>

En este ejemplo, el usuario puede cambiar la propiedad overflow de un objeto DIV de forma dinámica al elegir uno de los valores de desbordamiento posibles de un objeto SELECT:

<script>
function SetOverflow(o, svalue )
{
    o.style.overflow = svalue ;
}
</script>

<div id="div1" 
    style="font-size:18pt;background-color:yellow;height:50px;width:75px">
The quick brown fox jumps over the lazy dog.
</div>

<select onchange="SetOverflow(div1,
    this.options[this.selectedIndex].text)">
<option selected>visible
<option>scroll
<option>hidden
<option>auto
</select>

Información sobre estándares

Esta propiedad se define en la especificación Cascading Style Sheets (CSS), Level 2 (CSS2) (Hojas de estilos en cascada (CSS), nivel 2 (CSS2)).

Aplicable a

A, ABBR, ACRONYM, ADDRESS, APPLET, B, BDO, BIG, BLOCKQUOTE, BODY, CENTER, CITE, CODE, COL, COLGROUP, CUSTOM, DD, DEFAULTS, DEL, DFN, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HTML, HN, I, INPUT TYPE=BUTTON, INPUT TYPE=CHECKBOX, INPUT TYPE=FILE, INPUT TYPE=IMAGE, INPUT TYPE=PASSWORD, INPUT TYPE=RADIO, INPUT TYPE=RESET, INPUT TYPE=SUBMIT, INPUT TYPE=TEXT, INS, LI, OL, P, Q, RT, RUBY, S, SPAN, SUB, TT, U, UL, VAR, XMP

Vea también

Conceptos

posición