max-width
Свойство CSS max-width
устанавливает максимальную ширину элемента. Оно предотвращает используемое значение свойства width
от становления больше, чем значение, указанное для max-width
.
Интерактивный пример
Синтаксис
css
/* Ключевые слова */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: fill-available;
/* Значения длины */
max-width: 3.5em;
/* <percentage> значение */
max-width: 75%;
/* Глобальные значения */
max-width: inherit;
max-width: initial;
max-width: unset;
Значения
<length>
-
Максимальная ширина выражается как
<length>
. <percentage>
-
Максимальная ширина выражается как
<percentage>
от ширины родительского блока.
Значения-ключевые слова
none
-
Ширина не имеет максимального значения. (по умолчанию)
max-content
Экспериментальная возможность-
Внутренняя предпочтительная ширина.
min-content
Экспериментальная возможность-
Внутренняя минимальная ширина.
fill-available
Экспериментальная возможность-
Ширина родительского блока минус горизонтальные
margin
,border
, иpadding
. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова.,available
.) fit-content
Экспериментальная возможность-
То же что и
max-content.
Формальный синтаксис
max-width =
none | (en-US)
<length-percentage [0,∞]> (en-US) | (en-US)
min-content | (en-US)
max-content | (en-US)
fit-content( <length-percentage [0,∞]> (en-US) )
<length-percentage> =
<length> | (en-US)
<percentage>
Примеры
В этом примере, "child" будет иметь ширину 150 пикселей или ширину "parent", в зависимости от того, что меньше:
html
<div id="parent">
<div id="child">
Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
</div>
</div>
css
#parent {
background: lightblue;
width: 300px;
}
#child {
background: gold;
width: 100%;
max-width: 150px;
}
Значение fit-content
можно использовать для установки ширины элемента на основе внутреннего размера, требуемого его содержимым:
html
<div id="parent">
<div id="child">Child Text</div>
</div>
css
#parent {
background: lightblue;
width: 300px;
}
#child {
background: gold;
width: 100%;
max-width: -moz-fit-content;
max-width: -webkit-fit-content;
}
Проблемы доступности
Убедитесь, что элементы с max-width
не обрезаются и / или не закрывают другой контент, когда страница увеличена для увеличения размера текста.
Спецификации
Specification |
---|
CSS Box Sizing Module Level 4 # width-height-keywords |
CSS Box Sizing Module Level 4 # sizing-values |
Начальное значение | none |
---|---|
Применяется к | все элементы, кроме незаменяемых строчных элементов, табличных строк и групп строк |
Наследуется | нет |
Проценты | ссылается на ширину содержащего блока |
Обработка значения | проценты, как указаны, абсолютная длина или none |
Animation type | длина, проценты или calc(); |
Поддержка браузерами
BCD tables only load in the browser