La propiedad overflow

La propiedad overflow

Print Friendly, PDF & Email
La propiedad overflow
5 (100%) 1 voto[s]

La propiedad overflow permite regular la visiblidad de los contenidos que sobresalen de una caja html.

Permite regular si los contenidos que sobresalen se seguirán viendo, si se ocultarán o si aparecerá una barra de scroll en el documento.

Los valores que puede tomar son:

overflow:hidden; scroll; visible;

Veámoslo con algunos ejemplos.

overflow:hidden; scroll; visible;

En las siguientes 3 imágenes se muestra un ejemplo de cada.

El código usado es el siguiente:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="Francesc Ricart">
        <title>Document</title>
        
        <style>
        div{
        width:150px;
        height:100px;
        border:1px solid red;
        padding:1%;
        }
            
        div{
        overflow:visible;
/*
        overflow:hidden;
        overflow:scroll;
*/
        }
            
        </style>
        
    </head>
    <body>
        
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates debitis iste possimus doloribus doloremque earum dolor dolore fuga, eligendi itaque recusandae hic aperiam, cumque expedita, odio laborum. Tenetur, necessitatibus modi!
    </div>

    </body>
</html>

overflow:visible;

overflow:visible; de css
overflow:visible;

overflow:hidden;

overflow:hidden; de css
overflow:hidden;

overflow:scroll;

overflow:scroll; de css
overflow:scroll;

visible; hace que el texto sobresalga por encima del div.

hidden; hace que el texto que sobresalga por encima del div no sea visible.

scroll; crea una barra deslizante lateral

¡Hola!

Querido lector,

Espero que este resumen sobre la propiedad overflow te sea de utilidad.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.