Html width max: max-width — CSS: Cascading Style Sheets

Leave a Comment / Html / By /

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. Читайте о
animatable
Version:CSS2
Синтаксис JavaScript: object.style.maxWidth=»600px»

Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Свойство
max-width1.07.01.02.0.27.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 при наведении
css формы

Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности О нас Контакты

max-width | CSS 3 справочник

CSS (от англ. Cascading Style Sheets «каскадные таблицы стилей») — формальный язык описания внешнего вида документа (веб-страницы)

Перед вами самый полный справочник по языку разметки CSS. Он будет полезен как новичкам так и профессионалам

Устанавливает максимальную ширину элемента. Значение ширины элемента будет вычисляться в зависимости от значений установленных свойств width, max-width и min-width.

В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.

Табл. 1. Ширина элемента
Значения свойствШирина
min-width<width<max-widthwidth
  width<max-widthwidth
  width>max-widthmax-width
min-width>width>max-widthmin-width
min-width>width<max-widthmin-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 ExplorerChromeOperaSafariFirefoxAndroidiOS
7.08.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 1CSS 2CSS 2.1CSS 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   
    
 Source: caniuse  

    
      высота
   

      
        .элемент { высота: 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

 .