Si no establecemos bien el ancho "width" o el alto "height" de nuestro DIV donde introduciremos información de modo texto. Dicho texto se nos saldrá de nuestro DIV. y nos dañara el estilo de nuestra pagina que estemos creando.
En este ejemplo crearemos un DIV en el archivo [ .html ] con nombre de clase "class" [ estilo_div ], donde vamos a escribir nuestro texto.
Tenemos opciones, una de ellas seria darle mas altura a el DIV para que tenga un rango mas alto y encierre todo el texto, pero si nuestro texto es demasiado extenso tendríamos un DIV muy grande que muy seguramente nos ocasionara molestias en el diseño de nuestro sitio web o sencillamente no queremos un DIV de este tamaño.
Ahora vamos a el archivo [ .css ] creado que en este ejemplo usaremos [ estilo.css ] y le pondremos a el DIV un Scroll, para que el texto no se salga si no que tenga la opción se bajar o subir el Scroll de el DIV, con la propiedad [ overflow ].
Como podemos observar apareció un Scroll en la parte derecha de nuestro DIV y nos permite bajar o subir para observar todo el texto que tenemos en nuestro DIV sin que se nos salga.
con la propiedad [ overflow-y ] nos estamos situando en la parte derecha de nuestra pantalla sobre el eje "Y", después le decimos que sobre nuestro eje "Y" queremos que nos situé un Scroll para poder navegar de forma vertical en nuestro DIV.
También lo podemos utilizar sobre el eje "X" solo remplazamos de la siguiente manra.
Esta propiedad no solo es para colocar los Scroll también la podemos utilizar para ocultarlos, un ejemplo claro es cuando estamos haciendo una pagina web o cualquier otro proyecto con entorno web y no queremos que se muestre los Scroll, solo debemos colocarlo de la siguiente manera.
En nuestro archivo [ estilo.css ] colocaremos lo siguiente:
y listo, o también podemos dejar solo [ overflow:hidden ] para ocultar los 2 ejes a la vez.
En este ejemplo crearemos un DIV en el archivo [ .html ] con nombre de clase "class" [ estilo_div ], donde vamos a escribir nuestro texto.
<html> <head> </head> <body> <div class="estilo_div"> </div> </body> </html>Ahora introducimos el texto dentro de nuestro DIV creado
<html> <head> </head> <body> <div class="estilo_div">Hola mundo, esto es una prueba donde el texto se sale de nuestro DIV y dara un mal aspecto a el sitio Web </div> </body> </html>nuestro div tiene como como propiedades:
.estilo_div{
background:#ff6600;
border-radius:3px;
height:50px;
width:250;
}
como podemos ver el texto se sale de nuestro DIV, puesto que tiene una altura muy pequeña para el DIV creado.
Hola mundo, esto es una prueba donde el texto se sale de nuestro DIV y dara un mal aspecto a el sitio web..
Tenemos opciones, una de ellas seria darle mas altura a el DIV para que tenga un rango mas alto y encierre todo el texto, pero si nuestro texto es demasiado extenso tendríamos un DIV muy grande que muy seguramente nos ocasionara molestias en el diseño de nuestro sitio web o sencillamente no queremos un DIV de este tamaño.
Ahora vamos a el archivo [ .css ] creado que en este ejemplo usaremos [ estilo.css ] y le pondremos a el DIV un Scroll, para que el texto no se salga si no que tenga la opción se bajar o subir el Scroll de el DIV, con la propiedad [ overflow ].
.estilo_div{
background:#ff6600;
border-radius:3px;
height:50px;
overflow-y:scroll;
width:250;
}
Vista previa
Hola mundo, esto es una prueba donde el texto se sale de nuestro DIV y dara un mal aspecto a el sitio web..
Como podemos observar apareció un Scroll en la parte derecha de nuestro DIV y nos permite bajar o subir para observar todo el texto que tenemos en nuestro DIV sin que se nos salga.
con la propiedad [ overflow-y ] nos estamos situando en la parte derecha de nuestra pantalla sobre el eje "Y", después le decimos que sobre nuestro eje "Y" queremos que nos situé un Scroll para poder navegar de forma vertical en nuestro DIV.
También lo podemos utilizar sobre el eje "X" solo remplazamos de la siguiente manra.
.estilo_div{
background:#ff6600;
border-radius:3px;
height:50px;
overflow-x:scroll;
width:250;
}
Si deseamos tener el Scroll tanto en el eje "Y" como en el "X" solo pondremos [ overflow:scroll ] automáticamente el navegador sitúa los dos Scroll en los dos ejes..estilo_div{
background:#ff6600;
border-radius:3px;
height:50px;
overflow:scroll;
width:250;
}
Vista previa
Hola mundo, esto es una prueba donde el texto se sale de nuestro DIV y dara un mal aspecto a el sitio web..
Esta propiedad no solo es para colocar los Scroll también la podemos utilizar para ocultarlos, un ejemplo claro es cuando estamos haciendo una pagina web o cualquier otro proyecto con entorno web y no queremos que se muestre los Scroll, solo debemos colocarlo de la siguiente manera.
En nuestro archivo [ estilo.css ] colocaremos lo siguiente:
body{
overflow-y:hidden
}
Con esto le estamos diciendo a nuestro navegador que queremos que nos oculte el Scroll del eje "Y" de todo el cuerpo de nuestro proyecto. Si deseamos ocultar el eje "X" solo reemplazamos la "Y" por la "X"y listo, o también podemos dejar solo [ overflow:hidden ] para ocultar los 2 ejes a la vez.
hno
ResponderEliminar