La propiedad overflow

La propiedad overflow

Print Friendly, PDF & Email
La propiedad overflow
Valora esta entrada
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!

Entradas relacionadas:

Posicionamiento flotante de cajas. float: left | right | both; y propiedad clear
- 66
Apuntes de alumno y ejemplos de como usar la propiedad float y clear. Esta publicación forma parte del "tutorial css - apuntes de clase"
Dimensiones reales de una caja en CSS
- 110
Las dimensiones reales de una caja, por defecto, no son las que indica el width. Veamos como se calculan y en que nos puede ayudar aprenderlo.
Maquetar una página de prestashop 1.6 con bootstrap
- 319
Maquetar páginas en Prestashop 1.6 con tablas es un deporte de riesgo para implementadores anclados en el pasado. En esta entrada te muestro un ejemplo sencillo y sin demasiadas complicaciones para qu...
Factores que afectan al tiempo de carga de una página web
- 255
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Introducción al CSS. Que significa Cascading Style Sheets.
- 135
Se explica que es el CSS, que significa en realidad el acrónimo y porqué se le llama así y hacemos una primera toma de contacto con este lenguaje web.
Como crear columnas con CSS de forma fácil mediante Inline-block y float
- 39
Dado un mismo código html como crearíamos columnas en un documento web utilizando floats versus haciéndolo con inline-block;
Como centrar un texto mediante CSS y no con HTML
- 162
Hay ocasiones en las que necesitamos centrar un texto pero no hay manera. La forma correcta de hacerlo es mediante CSS.
Resumen de como comentar código en html, css y javascript
- 310
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
Ejemplo de centrado horizontal de una caja con CSS
- 232
Ejemplo de como centrar horizontalmente una caja o contenedor en una página web y mediante CSS.
Concepto de herencia en CSS
- 161
¿Imaginas tener que especificar una por una los estilos a cada una de las etiquetas? El concepto de CSS nos ayuda a optimizar código. Entender sus propiedades nos puede ayudar mucho a ser mejores maqu...
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.