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>[vc_custom_heading text=»overflow:visible;» font_container=»tag:h3|text_align:center» use_theme_fonts=»yes»]
[vc_custom_heading text=»overflow:hidden;» font_container=»tag:h3|text_align:center» use_theme_fonts=»yes»]
[vc_custom_heading text=»overflow:scroll;» font_container=»tag:h3|text_align:center» use_theme_fonts=»yes»]
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!
Deja una respuesta