Atributo max-inline-size de CSS

Página anterior max-height
Página siguiente max-width

Definición y uso

max-inline-size El atributo especifica el tamaño máximo del elemento en la dirección de línea interna.

Si el tamaño del contenido en la dirección de línea interna es menor que el tamaño máximo, max-inline-size El valor del atributo no tiene efecto.

Si el tamaño del contenido en la dirección de línea interna es mayor que el tamaño máximo, se aplicará max-inline-size Valores del atributo.

Nota:Atributos CSS relacionados writing-mode Define la dirección de línea interna, lo que afecta a max-inline-size El resultado del atributo. Para las páginas en inglés, la dirección de bloque es hacia abajo y la dirección de línea interna es de izquierda a derecha.

CSS max-inline-size El atributo es similar al atributo max-height y max-width Muy similar, pero max-inline-size El atributo depende de la dirección de línea interna.

Ejemplo

Ejemplo 1

div {
  max-inline-size: 60px;
}

Intente hacerlo usted mismo

Ejemplo 2: Modo de escritura

Establezca el tamaño máximo en la dirección de línea interna del elemento <div> en 60 píxeles: writing-mode Cuando el valor del atributo se establece en vertical-rl, la dirección de la línea interna cambia de lateral a hacia abajo, lo que afecta a max-inline-size Manera de trabajar del atributo:

div {
  max-inline-size: 60px;
  writing-mode: vertical-rl;
}

Intente hacerlo usted mismo

Ejemplo 3: Max-inline-size vs Inline-size

Observar un elemento <div> (inline-size 100px) y otro elemento <div> (max-inline-size diferentes reacciones en función del cambio del tamaño del contenido (100px):

#div1 {
  max-inline-size: 100px;
}
#div2 {
  inline-size: 100px;
}

Intente hacerlo usted mismo

Sintaxis de CSS

max-inline-size: auto|longitud|initial|inherit;

Valor del atributo

Valor	Descripción
auto	Predeterminado. Valor predeterminado de max-inline-size del elemento.
longitud	Utilice unidades como px, pt, cm, etc. Vea:Unidades CSS.
%	Especifique el porcentaje de tamaño en el eje correspondiente en relación con el elemento padre.
initial	Establezca este atributo en su valor predeterminado. Vea: initial.
inherit	Hereda este atributo de su elemento padre. Vea: inherit.

Detalles técnicos

Valor predeterminado:	auto
Herencia:	No
Producción de animación:	Admite. Consulte:Atributos relacionados con la animación.
Versión:	CSS3
Sintaxis de JavaScript:	object.style.maxInlineSize="60px"