Max-inline-size - CSS-трикове | CSS алманах 2025

max-inline-sizeе логическо свойство в CSS, което определя максималната ширина на елемент, когато writing-modeе хоризонтално, или максималната височина на елемента, когато writing-modeе вертикално.

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

Както може би се досещате от примера по-горе, writing-modeсвойството променя ориентацията на текста и оформлението с 90 градуса.

Основната причина за промяна на ориентацията, освен създаването на изискани дизайни, е да се приспособи към интернационализацията на сайта. Много източноазиатски писмености като китайски, японски и корейски могат да бъдат написани хоризонтално или вертикално. Използвайки логически свойства, можем да осигурим правилната посока на оразмеряване на елементи въз основа на режима на писане от потребителя.

Джен Симънс има статия и презентация, които навлизат по-дълбоко в режимите на писане на CSS.

Не можем ли просто да използваме `max-width`имота?

Да! Но ако не поддържате Internet Explorer, няма причина да не използвате max-inline-sizeвместо това. max-widthе физическо измерение, така че когато режимът на запис се промени, елемент запазва хоризонталния си размер на ширината, нарушавайки оформлението, когато е настроен да бъде вертикален. Логическите свойства, като например max-inline-size, могат да реагират на тези промени и да приложат размера в правилната ориентация.

Синтаксис

max-inline-size: ;

Първоначално: auto
Отнася се за: същото като heightиwidth
Наследен: не
Проценти: както за съответното физическо свойство
Изчислена стойност: същата като heightиwidth
Тип анимация: по тип изчислена стойност

Стойности

/* 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;

Демонстрация

Когато writing-modeе зададено на vertical-rl, съдържанието ще се завърти, променяйки оформлението. Ширината на max-widthкутията ще се върти заедно със съдържанието. Но max-inline-sizeе умно! Оставя ширината си в такт, независимо от writing-modeстойността. Превключете writing-modeв следващата демонстрация, за да видите разликата между двете.