CSS, propiedad: overflow

La propiedad overflow de css, le indica a los navegadores el comportamiento que debe realizar si un contenido es mayor a la caja que lo contiene. Las opciones son 2:

Hidden. Simplemente esconde cualquier contenido extra que no se ajuste a la caja.

Scroll. Esta propiedad agrega una barra de scroll a la caja para que el usuario pueda ver todo el contenido.

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <title>Propiedad:overflow  </title>
</head>
<body>
 <h2>Ejemplo con hidden</h2>
 <p id="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a nulla ac erat luctus cursus nec sed nibh. Vivamus ultrices est in metus efficitur, dapibus dictum velit semper. Sed turpis lacus, bibendum sed urna sed, blandit posuere mauris. Vestibulum sit amet est lobortis, pulvinar lacus et, rhoncus augue</p>
 
 <h2>Ejemplo con scroll</h2>
 <p id="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a nulla ac erat luctus cursus nec sed nibh. Vivamus ultrices est in metus efficitur, dapibus dictum velit semper. Sed turpis lacus, bibendum sed urna sed, blandit posuere mauris. Vestibulum sit amet est lobortis, pulvinar lacus et, rhoncus augue</p>
</body>
</html>

CSS

#p1 {
 overflow: hidden;
}
 
#p2 {
 overflow: scroll;
}

Espero te sea útil  y no olvides suscribirte a nuestro blog para recibir todos los artículos que publiquemos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

1 × 1 =