Max-inline-size - CSS-Tricks | Almanah CSS 2025

max-inline-sizeeste o proprietate logică în CSS care definește lățimea maximă a unui element atunci când writing-modeeste orizontală sau înălțimea maximă a elementului atunci când writing-modeeste verticală.

.element ( max-inline-size: 500px; writing-mode: vertical-lr; )

Așa cum ați fi putut ghici prin exemplul de mai sus, writing-modeproprietatea modifică orientarea textului și a fluxului de aspect cu 90 de grade.

Principalul motiv pentru a schimba orientarea, în afară de crearea de modele fanteziste, este de a găzdui internaționalizarea pe un site. Multe scripturi din Asia de Est, precum chineză, japoneză și coreeană, pot fi scrise orizontal sau vertical. Folosind proprietăți logice, putem oferi direcția corectă de dimensionare a elementelor pe baza modului de scriere al utilizatorului.

Jen Simmons are un articol și o prezentare care merg mai adânc în modurile de scriere CSS.

Nu putem folosi `max-width`proprietatea?

Da! Dar dacă nu sprijiniți Internet Explorer, nu există niciun motiv să nu îl folosiți max-inline-size. max-widtheste o dimensiune fizică, deci atunci când se schimbă modul de scriere, un element își păstrează dimensiunea lățimii orizontale, întrerupând un aspect atunci când este configurat să fie vertical. Proprietățile logice, cum ar fi max-inline-size, pot răspunde la aceste modificări și pot aplica dimensiunea în orientarea corectă.

Sintaxă

max-inline-size: ;

Iniţială: auto
Se aplică: la fel ca heightșiwidth
Moștenit: nu
Procente: ca pentru proprietatea fizică corespunzătoare
Valoare calculată: la fel ca heightșiwidth
Tipul animației: după tipul valorii calculate

Valori

/* Length values */ max-inline-size: 250px; max-inline-size: 5rem;   /* Percentage values */ max-inline-size: 75%;   /* Keyword values */ max-inline-size: auto; max-inline-size: fit-content(5rem); max-inline-size: max-content; max-inline-size: min-content;   /* Global values */ max-inline-size: inherit; max-inline-size: initial; max-inline-size: unset;

Demo

Când writing-modeeste setat la vertical-rl, conținutul se va roti, schimbând aspectul. Lățimea max-widthcutiei se va roti odată cu conținutul. Dar max-inline-sizeeste inteligent! Își lasă lățimea în tact, indiferent de writing-modevaloare. Comutați writing-modeîn următoarea demonstrație pentru a vedea diferența dintre cele două.