La propiedad overflow

La propiedad overflow

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.