Controlar el desbordamiento en una etiqueta con CSS

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:
px    Valor 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
em    El tamaño de la fuente definido por "font-size"
ex    La 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:
mm    Medida en milímetros
cm    Medida en centímetros
in    Medida en pulgadas (una pulgada = 2,54 centímetros)
pt    Medida en puntos (un punto = 1 / 72 pulgadas)
pc    Medida 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:
visible    Valor por defecto, la etiqueta se hará tan grande como lo requiera su contenido y sus propiedades
hidden    El contenido de la etiqueta que sobrepase el tamaño de la misma no se muestra
scroll    La etiqueta dispone siempre de las barras de scroll, hagan falta o no
auto    En caso de que el contenido sea mayor que la etiqueta mostrará la barra de scroll necesaria, o bien "arriba - abajo", "izquierda - derecha" o ambas
inherit    Heredará el valor del "overflow" que el elemento que lo contiene directamente (elemento padre)

Código de ejemplo:


<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>

En la siguiente página puedes ver varios ejemplos.
Autor: McAnam
http://hide-url.net/descargar/dWdnYzovL2pqai56cG5hbnoucGJ6L25lZ3ZwaHliZi9SZmd2eWJmLmN1Yz92cT00.html

	Autor	Tema: Controlar el desbordamiento en una etiqueta con CSS (Leído 367 veces)

0 Usuarios y 1 Visitante están viendo este tema.