EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            Transformaciones en CSS
            Transformaciones en CSS: rotar, torcer, escalar o deplazar
            24/10/2019
            Flexbox css
            Flexbox, modelo de caja flexible en CSS
            02/11/2019

            Propiedad CSS overflow, excedente de contenido

            propiedad overflow css

            propiedad overflow css

            Tabla de contenidos

            • Propiedad CSS overflow
            • Valores de overflow
            • Ejercicios propuestos

            En la unidad anterior vimos el comportamiento de los contenedores en CSS, veamos ahora cómo controlar el comportamiento del contenido que se encuentra en esos contenedores.

            Propiedad CSS overflow

            La propiedad overflow (desbordamiento o excedente) nos permite controlar el comportamiento del contenido que se encuentra en una caja o contenedor. Por lo tanto, mediante esta propiedad podremos especificar si queremos recortar un contenido, mostrar barras de desplazamiento o mostrar el contenido que excede de un elemento a nivel de bloque.

            Valores de overflow

            La propiedad overflow solo funciona sobre elementos de tipo bloque con una altura definida. Sus valores son los siguientes:

            overflow: visible|hidden|scroll|auto;
            • Overflow: visible (default). Por defecto la propiedad overflow es visible y lo que hace es que los contenidos se salgan del elemento y sean completamente visibles.
            • Overflow: hidden. Los contenidos que se salen del contenedor padre se ocultan y no se muestran barras de scroll. De esta forma se puede controlar el tamaño del elemento y su contenido.
            • Overflow: scroll. Se muestra una barra de scroll (horizontal y vertical) cuando los contenidos no caben en el contenedor o caja.
            • Overflow: auto. El navegador es el que decide si se muestran las barras de scroll o si se extiende el contenedor. En cualquier caso, gracias a este valor nunca se permite que el contenido desborde al contenedor. Este valor es muy interesante ya que si el contenido se sale por un lado (horizontal o vertical), sólo se muestra la barra de scroll de ese lado.

            Puede interesarte conocer también las propiedades overflow-x y overflow-y.


            Ejemplo

            Crea un contenedor con un ancho y alto fijo. Incluye en su interior un texto que exceda el espacio definido en el contenedor. Aplica los diferentes valores de la propiedad overflow y comenta sus diferencias.

            0

            Ejercicios propuestos

            Actividad 9.

            Utiliza la propiedad overflow con el valor «hidden» o «auto» para mostrar el texto de los artículos de la página del blog de tu proyecto web.

            Compartir

            UD4. CSS Avanzado

            • 1. Tipos de diseño web
            • 2. Medios en CSS
            • 3. Media queries CSS
            • 4. Metaetiqueta viewport
            • 5. Sombras CSS
            • 6. Gradientes CSS
            • 7. Selector de atributos en CSS
            • 8. Transiciones en CSS
            • 9. Transformaciones en CSS
            • 10. Propiedad overflow
            • 11. Flexbox, modelo de caja flexible
            • 12. Centrar horizontal y verticalmente con CSS
            • 13. Preprocesadores Less y Sass
            • 14. Estilos, elementos y código para la composición de tu web
            • 15. Herramientas útiles y referencias CSS
            • 16. CSS Grid para maquetar contenido con rejillas

            Unidades

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results