max-inline-size

Устанавливает максимальный размер элемента по строчной оси, направление которой зависит от значения свойства writing-mode. Для горизонтального письма (writing-mode: horizontal-tb) строчная ось будет располагаться горизонтально и max-inline-size устанавливает максимальную ширину элемента. Для вертикального направления письма (writing-mode: vertical-lr и writing-mode: vertical-rl) строчная ось будет располагаться вертикально и max-inline-size устанавливает максимальную высоту элемента.

Краткая информация

Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам
Анимируется Да

Синтаксис

max-inline-size: <размер> | <проценты>

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. При использовании процентной записи размер элемента вычисляется в зависимости от размера родительского элемента.

Пример

Код примера скопирован в буфер
<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>max-inline-size</title>
  <style>
   .block {
    background-color: #fff6eb; /* Цвет фона */
    color: #1b1b1b; /* Цвет текста */
    border: 1px solid #e4032e; /* Параметры рамки */
    padding: 1em; /* Расстояние от текста до края */
    margin: auto; /* По центру */
    max-inline-size: 80%; /* Максимальная ширина блока */
   }
  </style>
 </head>
 <body>
  <div class="block">Вольга Всеславьевич был знаменитым
   русским богатырем, прославившимся своей храбростью и силой. Он защищал
   Русь от многочисленных врагов и совершил немало подвигов во
   славу Отечества. Легенды описывают его как человека
   высокого роста и необычайной физической силы, который
   мог с легкостью одолеть даже самого могучего противника.</div>
 </body>
</html>

Объектная модель

Объект.style.maxInlineSize

Спецификация

CSS Logical Properties and Values Level 1

Браузеры

79 57 44 12.1 41
81 68 46 12.2
Логические

См. также