Campos de video abarrotados Trucos CSS – Trucos CSS
CSS overflow-clip-margin La propiedad determina hasta dónde puede llegar el desbordamiento de un elemento más allá del campo del elemento antes de que se corte. borde de desbordamiento.
.element {
height: 100px;
overflow: clip; /* required */
overflow-clip-margin: 20px;
}
overflow: clip; corta el contenido del artículo mientras overflow-clip-margin Establece hasta qué punto se permite mostrar el contenido fuera del video.sintaxis
overflow-clip-margin: <visual-box> || <length [0,∞]><visual-box>: Cuando el desplazamiento especificado es cero, el campo visible define el borde del cuadro que se utilizará como el comienzo del borde del clip de desbordamiento. Si se omite, el campo para llenar el elemento se usa por defecto.<length [0,∞]>: El desplazamiento indica cuánto se extiende el borde del clip de superposición desde el borde del campo seleccionado. Si se omite, el valor se establece en cero. Los valores negativos no son válidos.
- inicial:
0px - Se aplica a: todos los artículos
- Patrimonio: no
- Valor calculado: Calculado
- Tipo de animación: Discreto
/* <length> values */
overflow-clip-margin: 20px;
overflow-clip-margin: 1rem;
overflow-clip-margin: 2.4em;
overflow-clip-margin: 3ch;
/* <visual-box> value */
overflow-clip-margin: content-box;
overflow-clip-margin: padding-box;
overflow-clip-margin: border-box;
/* Global values */
overflow-clip-margin: inherit;
overflow-clip-margin: initial;
overflow-clip-margin: revert;
overflow-clip-margin: unset;overflow: clip Es un deber
necesitamos hablar overflow: clip propiedad según sea necesario overflow-clip-margin Haz tus cosas. en breve, overflow-clip Dígale al navegador que el contenido fuera del elemento debe ocultarse, al igual que declarar
. Donde clip La palabra clave es diferente en el sentido de que suprime cada desplazamiento, ya sea por parte del usuario o mediante programación. También vale la pena señalar que el campo en sí no se convierte en un contenedor de desplazamiento, ni comienza un nuevo contexto de formato. En otras palabras, cuando se corta el desbordamiento, no hay barra de desplazamiento automático ni nada por el estilo.
Podemos cortar un eje
overflow: clip Establece el corte a lo largo del eje X (dirección izquierda-derecha) y el eje Y (dirección arriba-abajo), pero si es necesario, podemos aislarlos y sujetarlos en una dirección usando overflow-x: clip y overflow-y: clip.
.element {
overflow-x: clip; /* clip along the x-axis only */
overflow-clip-margin: 20px;
}demostración
Esto se aplica a todas las formas de contenido, incluidas las imágenes.
Compatibilidad con navegador
Al momento de escribir, solo Chrome.
Más información
conectado
Desbordamiento
.element { overflow: hidden; }