CSS max-width
HTML5CSS.ru
ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
❮ Назад Полный CSS Справочник Дальше ❯
Пример
Задайте максимальную ширину элемента <p> до 150 пикселей:
p.ex1 {
max-width: 150px;
}
Подробнее примеры ниже.
Определение и использование
Свойство max-width
определяет максимальную ширину элемента.
Если размер содержимого превышает максимальную ширину, он автоматически изменит высоту элемента.
Если содержимое меньше максимальной ширины, свойство max-width
не имеет эффекта.
Примечание: Это предотвращает значение свойства Width, превышающее max-width
. Значение свойства max-width
переопределяет свойство Width.
Значение по умолчанию: | none |
---|---|
Inherited: | no |
Animatable: | yes, see individual properties. Читайте о |
Version: | CSS2 |
Синтаксис JavaScript: | object.style.maxWidth=»600px» |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Свойство | |||||
---|---|---|---|---|---|
max-width | 1.0 | 7.0 | 1.0 | 2.0.2 | 7.0 |
Синтаксис CSS
max-width: none|length|initial|inherit;
Значения свойств
Значение | Описание | |
---|---|---|
none | Нет максимальной ширины. Это значение по умолчанию | |
length | Определяет максимальную ширину в пикселах, см и т. д. читать о единицах длины | |
% | Определяет максимальную ширину в процентах от содержащего блока | |
initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) | |
inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Другие примеры
Пример
Установите максимальную ширину элемента <p> до 50% контейнера:
p.ex1 {
max-width: 50%;
}
Похожие страницы
CSS Справочник: CSS Height and Width
CSS Справка: min-width Свойство
HTML DOM Справочник: maxWidth Свойство
❮ Назад Полный CSS Справочник Дальше ❯
Популярное CSS
css текст
блоки css
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css
размер css
ссылки css
изображение css
выравнивание css
внешние отступы css
списки css
css ширина
css при наведении
css формы
Copyright 2018-2020 HTML5CSS. ru
Правила и Условия Политика конфиденциальности О нас Контакты
max-width | CSS 3 справочник
CSS (от англ. Cascading Style Sheets «каскадные таблицы стилей») — формальный язык описания внешнего вида документа (веб-страницы)
Перед вами самый полный справочник по языку разметки CSS. Он будет полезен как новичкам так и профессионалам
Устанавливает максимальную ширину элемента. Значение ширины элемента будет вычисляться в зависимости от значений установленных свойств width, max-width и min-width.
В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.
Значения свойств | Ширина | ||||
---|---|---|---|---|---|
min-width | < | width | < | max-width | width |
width | < | max-width | width | ||
width | > | max-width | max-width | ||
min-width | > | width | > | max-width | min-width |
min-width | > | width | < | max-width | min-width |
Данные из таблицы следует понимать следующим образом. Если значение ширины (width) больше значения max-width, то ширина элемента принимается равной значению max-width.
Синтаксис
max-width: значение | проценты | none | inherit
Значения
В качестве значений принимаются пикселы (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются.
- none
- Отменяет действие этого свойства.
- inherit
- Наследует значение родителя.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Версия сайта для КПК</title> <style media="handheld"> body { max-width: 320px; /* Максимальная ширина страницы в пикселах */ } </style> </head> <body> <h2>Текст заголовка</h2> <p>Текст примера</p> </body> </html>
В данном примере ширина страницы ограничена размером 320 пикселов для всех наладонных устройств. К ним относятся КПК, смартфоны и другие устройства, способные отображать HTML-документы.
Объектная модель
[window.]document.getElementById(«elementID»).style.maxWidth
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
7.0 | 8.0+ | 1.0+ | 4.0+ | 2.0+ | 1.0+ | 2.1+ | 2.0+ |
Краткая информация
Значение по умолчанию | none |
---|---|
Наследуется | Нет |
Применяется | Ко всем элементам, кроме встроенных и таблиц |
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visudet.html#propdef-max-width |
Версии CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
максимальная ширина | CSS-трюки — CSS-трюки
DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!
Свойство max-width
в CSS используется для установки максимальной ширины указанного элемента. Свойство max-width
переопределяет свойство width
, но min-width
всегда переопределяет max-width
независимо от того, следует ли оно до или после width 9.0006 в вашей декларации. Авторы могут использовать любые значения длины, если они являются положительным значением.
.обертка { ширина: 100%; максимальная ширина: 20em; /* Будет МАКСИМУМ шириной 20em */ } .обертка { минимальная ширина: 50em; /* Переопределяет максимальную ширину */ ширина: 100%; максимальная ширина: 20em; /* Будет МАКСИМУМ шириной 20em */ }Проверьте эту ручку!
Будьте внимательны, предполагая, что max-width
наследуется, так как это свойство не наследуется от других родительских элементов. Если ширина
из 300 пикселей был определен с максимальной шириной
из 600 пикселей, начальное значение ширины
всегда будет переопределять значение максимальной ширины
из 600 пикселей.
Browser support
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
7+ | All | All | All | All | All |
Android Chrome | Android Firefox | Android Browser | iOS Safari | Opera Mobile |
---|---|---|---|---|
All | All | All | All | All |
высота
.элемент { высота: 500 пикселей; }
максимальная высота
.element { max-height: 3rem; }
Максимальная ширина
.элемент { максимальная ширина: 100%; }
минимальная ширина
.элемент { минимальная ширина: 300 пикселей; }
ширина
.elment { ширина: 50%; }
css - максимальная ширина в таблице HTML
Задавать вопрос
спросил
Изменено 8 лет, 1 месяц назад
Просмотрено 7к раз
Ниже приведена HTML-таблица.
.panelgrid { макет таблицы: фиксированный; ширина: 100%; максимальная ширина: 500 пикселей; перенос слов: прерывание слова; }
<правила таблицы="все" граница="1">Идентификатор <тд>1тд>таблица> Значение Уууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууу длинный текст.
Данный стиль вызывает перенос слов, когда текст, введенный в ячейки таблицы, превышает указанное значение max-width: 500px;
недвижимость.
Чего не происходит, так это того, что когда ширина текста меньше, чем свойство max-width
, таблица должна автоматически соответствовать ширине текста, чего не происходит.
Ширина таблицы остается равной 500 пикселей, даже если длина текста меньше 500 пикселей.
Как сделать так, чтобы таблица автоматически уменьшалась, когда длина текста меньше указанной длины (в данном случае 500px)?
В настоящее время приведенный выше CSS выглядит примерно так:
.panelgrid { макет таблицы: фиксированный; ширина: 500 пикселей; перенос слов: прерывание слова; }
- HTML
- CSS
- HTML-таблица
2
Вам нужно будет добавить содержащий блочный элемент (таблица не является блочным элементом) и использовать max-width для ограничения ширины.
<дел> <таблица> ... таблица>
См. также этот ответ SO минимальная/максимальная ширина на элементах без блоков
3
Вместо этого измените свой css на этот: http://jsfiddle.net/3b5aa3qq/
.panelgrid td{ максимальная ширина: 400 пикселей; перенос слов: прерывание слова; }
Удалите длину слова «Длинное», чтобы увидеть, как оно уменьшается. Вы также можете добавить набивку, чтобы выглядеть красивее
2
вы можете установить автоматическую ширину таблицы и сохранить максимальную ширину 500 пикселей. Затем установите для word-break значение break-all
width:auto; максимальная ширина: 500 пикселей; слово-разрыв: разбить-все; Демо
здесь.
5
Вместо максимальной ширины или ширины попробуйте использовать минимальную ширину
1
.