Controlar el desbordamiento en una etiqueta


Muchas veces nos puede ocurrir que al hacer una etiqueta con un tamaño, el contenido de esta sea mayor que el que queramos darle, por lo que la apariencia de la página quede "deformada". Para evitar esto, podemos usar el estilo "overflow" que asigna como se comportará la etiqueta en este caso.

Para darle las medidas (ancho y alto) usaremos los estilos "height" y "width" que pueden recibir su valor en diferentes medidas, que se dividen en dos grandes grupos, las medidas relativas que cuentan con la ventaja de que aprovechan las resoluciones mayores y se puede aprovechar todo el ancho de pantalla, mientras que las posiciones absolutas permiten controlar mas el diseño.

Las medidas relativas:
pxValor por defecto, Medida en píxeles, el tamaño cambia para diferentes resoluciones
%Porcentaje, ocupa un el porcentaje dado del tamaño de que dispone la etiqueta
emEl tamaño de la fuente definido por "font-size"
exLa altura de la fuente definido por la letra "x" (x-height), esto es valido también para las fuentes sin letra "x", suele ser la mitad que "em", así 2ex = 1em


Las medidas absolutas:
mmMedida en milímetros
cmMedida en centímetros
inMedida en pulgadas (una pulgada = 2,54 centímetros)
ptMedida en puntos (un punto = 1 / 72 pulgadas)
pcMedida en picas (una pica = 12 puntos)

Estas medidas deben estar pegadas al dígito para que todos los exploradores las puedan coger correctamente, por ejemplo para 10 centímetros de alto: "height:10cm;" sería correcto, sin embargo: "height:10 cm;" (fijarse en el espacio) algunos navegadores lo interpretarían mal.

Los posibles valores de overflow pueden ser:
visibleValor por defecto, la etiqueta se hará tan grande como lo requiera su contenido y sus propiedades
hiddenEl contenido de la etiqueta que sobrepase el tamaño de la misma no se muestra
scrollLa etiqueta dispone siempre de las barras de scroll, hagan falta o no
autoEn caso de que el contenido sea mayor que la etiqueta mostrará la barra de scroll necesaria, o bien "arriba - abajo", "izquierda - derecha" o ambas
inheritHeredará el valor del "overflow" que el elemento que lo contiene directamente (elemento padre)


Código:
<!--Copyright © McAnam.com-->
<div style="width:3cm;height:3cm;overflow:hidden;border:1px solid #ff0000;">
    Esta capa tiene unas medidas de 3 centímetros de ancho y otros 3 centímetros de alto.<br>
    El contenido que no quepa desaparecerá
</div>
<br><br>
<div style="width:20%;height:1in;overflow:auto;border:1px solid #00ff00;">
    Esta capa tendrá una pulgada de alto y un 20% de ancho
    del espacio de que disponga    en su capa padre.<br>
    En caso de que el contenido sea mayor que el tamaño de la capa, mostrará
    las barras de scroll.
</div>
<br><br>
<div style="width:300px;height:100pt;overflow:scroll;border:1px solid #0000ff;">
    Esta capa ocupará 100 puntos de alto y 300 píxeles de ancho.<br>
    Mostrará siempre las dos barras de scroll, las necesite o no.
</div>

Demostración:
Esta capa tiene unas medidas de 3 centímetros de ancho y otros 3 centímetros de alto.
El contenido que no quepa desaparecerá


Esta capa tendrá una pulgada de alto y un 20% de ancho del espacio de que disponga en su capa padre.
En caso de que el contenido sea mayor que el tamaño de la capa, mostrará las barras de scroll.


Esta capa ocupará 100 puntos de alto y 300 píxeles de ancho.
Mostrará siempre las dos barras de scroll, las necesite o no.

Links relacionados:
Maquetación con divs y CSS (margin y position absolute)
Maquetación con divs y CSS (float)
Mostrar capas con formato de tabla
Cambiar el color de las barras de scroll
Como usar los estilos


Para cualquier duda, consulta, sugerencia, opinión, colaboración, etc; no dude en ponerse en contacto con nosotros

Copyright © 2002-2017 [McAnam]. Reservados todos los derechos.
www.mcanam.com