HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Tutorial CSS

CSS INICIO Introducción a CSS Sintaxis CSS Selectores de CSS CSS Cómo Comentarios CSS Colores CSS
Colores RGB MALEFICIO LGV
Fondos CSS
Color de fondo Imagen de fondo Repetición de fondo Archivo adjunto de antecedentes Taquigrafía de fondo
Bordes CSS
Fronteras Ancho del borde Color del borde Lados del borde Taquigrafía de borde Bordes redondeados
Márgenes CSS
Márgenes Margin Collapse
Relleno CSS Altura/ancho de CSS Modelo de caja CSS Esquema CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
Texto CSS
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
Fuentes CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
Iconos CSS Enlaces CSS Listas CSS Tablas CSS
Table Borders Table Size Table Alignment Table Style Table Responsive
Pantalla CSS Ancho máximo de CSS Posición de CSS Índice Z de CSS Desbordamiento de CSS CSS flotante
Float Clear Float Examples
Bloque en línea CSS Alinear CSS Combinadores de CSS Pseudo-clase CSS Pseudoelemento CSS Opacidad CSS Barra de navegación CSS
Navbar Vertical Navbar Horizontal Navbar
Menús desplegables de CSS Galería de imágenes CSS Sprites de imagen CSS Selectores de atributos CSS Formularios CSS Contadores CSS Diseño del sitio web CSS Unidades CSS Especificidad CSS CSS !importante Funciones matemáticas CSS

CSS Avanzado

Esquinas redondeadas CSS Imágenes de borde CSS Fondos CSS Colores CSS Palabras clave de color CSS Gradientes CSS
Linear Gradients Radial Gradients Conic Gradients
Sombras CSS
Shadow Effects Box Shadow
Efectos de texto CSS Fuentes web CSS Transformaciones CSS 2D Transformaciones CSS 3D Transiciones CSS Animaciones CSS Información sobre herramientas de CSS Imágenes de estilo CSS Reflejo de imagen CSS Ajuste de objeto CSS Posición del objeto CSS Enmascaramiento CSS Botones CSS Paginación CSS Columnas múltiples de CSS Interfaz de usuario de CSS Variables CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Tamaño del cuadro CSS Consultas de medios CSS Ejemplos de CSS MQ Caja flexible de CSS
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

Responsivo CSS

Introducción a la tracción trasera Vista de RWD Vista de cuadrícula RWD Consultas de medios RWD Imágenes de RWD Vídeos de RWD Marcos RWD Plantillas RWD

Cuadrícula CSS

Introducción a la cuadrícula Contenedor de rejilla Elemento de cuadrícula

CSS SASS

Tutorial de SASS

Ejemplos de CSS

Plantillas CSS Ejemplos de CSS prueba css Ejercicios CSS Certificado CSS

Referencias CSS

Referencia CSS Selectores de CSS Funciones CSS CSS Referencia Aural Fuentes web seguras CSS CSS Animable Unidades CSS Convertidor CSS PX-EM Colores CSS Valores de color CSS Valores predeterminados de CSS Compatibilidad con navegador CSS

Diseño CSS - Desbordamiento

❮ Anterior Próximo ❯

La propiedad CSS overflowcontrola 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. El dolor mismo es el amor. Por eso es para el más mínimo por venir, que nuestra práctica normal soporta para aprovechar las consecuencias. El dolor del buró en los Juegos Olímpicos, o el dolor del buró en los Juegos Olímpicos, quiere ser una molestia para las consecuencias, o sufre el dolor del sistema inmunológico de la UE a la verdad, el eros. y el consumidor, y el odio regular del zzril. Para un tiempo libre cuando nos liberamos de nuestros adolescentes no hay elección Los tipos no tienen una claridad inherente.

Desbordamiento de CSS

La overflowpropiedad especifica si recortar el contenido o agregar barras de desplazamiento cuando el contenido de un elemento es demasiado grande para caber en el área especificada.

La overflowpropiedad 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 overflowpropiedad solo funciona para elementos de bloque con una altura especificada.

Nota: En OS X Lion (en Mac), las barras de desplazamiento están ocultas de forma predeterminada y solo se muestran cuando se usan (aunque esté configurado "desbordamiento: desplazamiento").

desbordamiento: visible

De forma predeterminada, el desbordamiento es visible, lo que significa que no se recorta y se representa fuera del cuadro del elemento:

Puede usar la propiedad de desbordamiento cuando desee tener un mejor control del diseño. La propiedad de desbordamiento especifica qué sucede si el contenido desborda el cuadro de un elemento.

Ejemplo

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

desbordamiento: oculto

Con el hiddenvalor, el desbordamiento se recorta y el resto del contenido se oculta:

Ejemplo

div {
  overflow: hidden;
}

desbordamiento: desplazamiento

Al establecer el valor en scroll, el desbordamiento se recorta y se agrega una barra de desplazamiento para desplazarse dentro del cuadro. Tenga en cuenta que esto agregará una barra de desplazamiento tanto horizontal como verticalmente (incluso si no la necesita):

Puede usar la propiedad de desbordamiento cuando desee tener un mejor control del diseño. La propiedad de desbordamiento especifica qué sucede si el contenido desborda el cuadro de un elemento.

Ejemplo

div {
  overflow: scroll;
}

desbordamiento: automático

El autovalor es similar a scroll, pero agrega barras de desplazamiento solo cuando es necesario:

Puede usar la propiedad de desbordamiento cuando desee tener un mejor control del diseño. La propiedad de desbordamiento especifica qué sucede si el contenido desborda el cuadro de un elemento.

Ejemplo

div {
  overflow: auto;
}

desbordamiento-x y desbordamiento-y

Las propiedades overflow-xy overflow-yespecifican si cambiar el desbordamiento de contenido solo horizontal o verticalmente (o ambos):

overflow-xespecifica qué hacer con los bordes izquierdo/derecho del contenido.
overflow-yespecifica qué hacer con los bordes superior/inferior del contenido.

Puede usar la propiedad de desbordamiento cuando desee tener un mejor control del diseño. La propiedad de desbordamiento especifica qué sucede si el contenido desborda el cuadro de un elemento.

Ejemplo

div {
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: scroll; /* Add vertical scrollbar */
}

Ponte a prueba con ejercicios

Ejercicio:

Fuerce una barra de desplazamiento al elemento <div> con class="intro".

<style>
.intro {
  width: 200px;
  height: 70px;
  : ;
}
</style>

<body>

<div class="intro">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum,
nisi lorem egestas odio,
vitae scelerisque enim ligula venenatis dolor.
</div>

</body>

Todas las propiedades de desbordamiento de CSS

Property Description
overflow Specifies what happens if content overflows an element's box
overflow-wrap Specifies whether or not the browser can break lines with long words, if they overflow its container
overflow-x Specifies what to do with the left/right edges of the content if it overflows the element's content area
overflow-y Specifies what to do with the top/bottom edges of the content if it overflows the element's content area


❮ Anterior Próximo ❯