34-overflow en css

La propriedad overflow controla lo que sucede con el contenido que es demasiado grande para caber en un área.

Este texto es realmente largo y la altura de su contenedor es de solo 100 píxeles. Por lo tanto, se agrega una barra de desplazamiento para ayudar al lector a desplazarse por el contenido. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolor magna aliquam erat volutpat.

La propriedad overflow especifica si recortar el contenido o para agregar barras de desplazamiento cuando el contenido de un elemento es demasiado grande para caber en el especificado zona.

Esta propriedad tiene los siguientes valores:

visible Defecto. El desbordamiento no se recorta. El contenido se muestra fuera de la caja del elemento.
hidden El desbordamiento se recorta y el resto del contenido será invisible
scroll El desbordamiento se recorta y se agrega una barra de desplazamiento para ver el resto del contenido
auto Similar a scroll, pero agrega barras de desplazamiento solo cuando es necesario

Nota: La propiedad overflow solo funciona para elementos de bloque con una altura especificada.

...

Overflow:visible

Esta propriedad esta por defecto, lo que significa que se escribimos algo dentro de una caja, que sobrepase esa caja, se quedara visible

ejemplo de overflow:visible

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste repellendus ea mollitia maiores enim animi impedit dignissimos recusandae? Vero molestias sunt natus nam sint corrupti pariatur. Qui autem nostrum maxime. Voluptatem porro magni saepe perferendis distinctio tenetur iusto ex nemo laboriosam praesentium inventore soluta libero, labore deserunt tempora ab minus totam? Adipisci eius numquam non consectetur, provident atque expedita quo?

Ejemplo del codigo de css

        div {
            width: 200px;
            height: 65px;
            background-color: coral;
            overflow: visible;
          }

overflow:hidden (desdobramiento: oculto)

La propriedad hidden oculta todo lo que sobra de la caja ocultando el contenido

ejemplo anterior pero con la propriedad hidden

overflow:scroll

Con esta propriedad lo que hacemos es crear dos barras deslizantes para si podermos ver todo el contenido

ejemplo anterior con la propriedad overflow:scroll

overflow:auto

Esta propriedad es similar a la anterior, pero con la particularidad de que solo pone las barras deslizantes, en caso de necessidad

ejemplo anterior con la propriedad overflow:auto

overflow-x y overflow-y

Estas propriedades hacen que el contenido se transborde solo en la vertical o solo en la horizontal

ejemplo de overflow-x:hidden

ejemplo de overflow-y:scroll

Ir al indice