Proprietà max-inline-size CSS

Pagina precedente max-height
Pagina successiva max-width

Definizione e uso

max-inline-size L'attributo specifica la dimensione massima dell'elemento nella direzione inline.

Se la dimensione del contenuto nella direzione inline è minore della dimensione massima, allora max-inline-size Il valore dell'attributo non ha effetto.

Se la dimensione del contenuto nella direzione inline è maggiore della dimensione massima, viene applicato max-inline-size valori dell'attributo.

Attenzione:Proprietà CSS correlate Impostare la direzione inline dell'elemento <div> come Definisce la direzione inline, il che influisce su max-inline-size Il risultato dell'attributo. Per le pagine in inglese, la direzione del blocco è verso il basso e la direzione inline è da sinistra a destra.

CSS max-inline-size l'attributo è correlato all'attributo CSS max-height e max-width Molto simile, ma max-inline-size L'attributo dipende dalla direzione inline.

Esempio

Esempio 1

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

Prova tu stesso

Impostare la dimensione massima inline dell'elemento <div> su 60 pixel:

Esempio 2: Modo di scrittura Impostare la direzione inline dell'elemento <div> come writing-mode max-inline-size Modalità di funzionamento dell'attributo: quando l'attributo viene impostato su vertical-rl, la direzione inline cambia da laterale a verso il basso, il che influisce su

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

Prova tu stesso

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

Osservare un elemento <div> (inline-size ad esempio, 100px) e un altro elemento <div> (max-inline-size risposte diverse (ad esempio, 100px) alla variazione delle dimensioni del contenuto:

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

Prova tu stesso

Sintassi CSS

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

Valore dell'attributo

Valore	Descrizione
auto	Predefinito. Valore predefinito di max-inline-size dell'elemento.
length	Usare unità come px, pt, cm. Vedi:Unità CSS.
%	Specificare una percentuale della dimensione dell'asse corrispondente rispetto all'elemento genitore.
initial	Imposta questo attributo al suo valore predefinito. Vedi initial.
inherit	Inherita da l'elemento genitore. Vedi inherit.

Dettagli tecnici

Valore predefinito:	auto
Ereditarietà:	No
Produzione di animazione:	Supportato. Vedi:Proprietà correlate agli animazioni.
Versione:	CSS3
Sintassi JavaScript:	object.style.maxInlineSize="60px"