Cargando

Ir a contenido

X

 


Overlowing en HTML5

En este tutorial veremos un poco como tratar un elemento cuando se desborda utilizando la propiedad overflow sobre ellos y sus contenedores.



Escrito por jul 01 2014 16:53


Una vez empezamos el camino de hacer cambios en los tamaños de los elementos y sus contenedores, siempre nos llega un momento en el cual ambos ya no son compatibles y nos llega el terrible efecto del overflow o desbordamiento, que no es más que el efecto de que un elemento es más grande que otro y se sale de su contenedor.

Creando un elemento que se desborda


Veamos un ejemplo clásico de un elemento que es muy pequeño para su contenido y que genera un desbordamiento, como todo es más sencillo verlo a través de ejemplos, primero veamos uno antes de pasar a ver las propiedades que nos ayudan a controlar el desbordamiento.

<!DOCTYPE HTML>
<html>
    <head>
	    <title>Example</title>
		 <style type="text/css">
		    p {
			    width: 200px;
			    height: 100px;
			    border: medium double black;
		     }
	    </style>
    </head>
    <body>
	    <p>
		    There are lots of different kinds of fruit - there are over 500 varieties
		    of banana alone. By the time we add the countless types of apples, oranges,
		    and other well-known fruit, we are faced with thousands of choices. 
	    </p>
    </body>
</html>

El código anterior nos genera el siguiente resultado en el navegador:

HTML5_Overflowing.jpg


Como podemos observar el texto sobre pasa la capacidad del cuadro contenedor, para corregir esto podemos utilizar la propiedad overflow, veamos las propiedades antes de pasar a hacer la corrección a este problema:

overflow-x/overflow-y: Determinan el comportamiento del desbordamiento horizontal o vertical.


Overflow: Es un atajo para utilizar la propiedad anterior y el orden en que actua es overflow, overflow x, overflow y.


Las propiedades que pueden utilizarse con el elemento overflow son las siguientes:

auto: Este valor le delega al navegador la responsabilidad de decidir qué hacer, usualmente lo que pasa es que una barra de scroll se muestra cuando el elemento se empieza a desbordar conteniendo a el mismo.


hidden: El contenido es mostrado hasta la parte que no se desborda ocultando el resto del contenido, no tiene mecanismos para indicarle al usuario que debe hacer para ver el resto del contenido.


no-content: El contenido desbordado es eliminado si no puede acomodarse dentro del contenedor. Este valor no es soportado por ninguno de los navegadores más populares


no-display: El contenido es ocultado si no se puede mostrar totalmente. Este valor no es soportado por ninguno de los navegadores más populares.


scroll: El navegador genera una barra de scroll permitiendo al usuario siempre poder ver el contenido desbordado dentro del contenedor. La barra va a depender del navegador y del sistema para definir la forma en que se muestra. La barra de scroll siempre estará visible aunque el elemento no se desborde.


visible: Este es el valor por defecto. El contenido siempre es mostrado aunque se desborde.


Ahora que ya tenemos las herramientas de como atacar un desbordamiento veamos en la práctica cómo podemos aplicarlo, nada mejor que un poco de código para demostrarlo:

<!DOCTYPE HTML>
<html>
    <head>
	    <title>Example</title>
	    <style type="text/css">
		    p {
			    width: 200px;
			    height: 100px;
			    border: medium double black;
		    }
		    #first {overflow: hidden;}
		    #second { overflow: scroll;}
	    </style>
    </head>
    <body>
	    <p id="first">
		    There are lots of different kinds of fruit - there are over 500 varieties
		    of banana alone. By the time we add the countless types of apples, oranges,
		    and other well-known fruit, we are faced with thousands of choices.  
	    </p>
	    <p id="second">
		    There are lots of different kinds of fruit - there are over 500 varieties
		    of banana alone. By the time we add the countless types of apples, oranges,
		    and other well-known fruit, we are faced with thousands of choices. 
	    </p>
    </body>
</html>


Hemos utilizado dos elementos para demostrar cómo trabaja el overflow, en el primero colocamos la propiedad hidden donde sabemos que solo se mostrará el contenido hasta donde empiece el desborde luego el resto se oculta y para el segundo utilizamos scroll, con el cual se mostrará una barra de scroll se desborde o no el elemento, veamos el resultado:

HTML5_Overflowing2.jpg

¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0


AYUDA A MEJORAR ESTE TUTORIAL!

¿Quieres ayudarnos a mejorar este tutorial más? Puedes enviar tu Revisión con los cambios que considere útiles. Ya hay 0 usuario que han contribuido en este tutorial al enviar sus Revisiones. ¡Puedes ser el próximo!


Tutoriales Relacionados



1 Comentarios


Roberto Gomez
jul 01 2014 17:31
Este es útil, si señor.
No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
-
VOTA
5
0%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado jul 01 2014 16:53
  •   Visitas 673
  •   Nivel
    Profesional