Ширина по содержимому css: веб программирование — Как сделать ширину div по содержимому?

Leave a Comment / Css / By /

Ключевое слово max-content sizing представляет собой присущую максимальную ширину высоту Последнее изменение:29 августа 2022 года,авторский коллектив MDN


Ключевое слово max-content sizing представляет собой присущую содержимому максимальную ширину или высоту.Для текстового содержимого это означает,что содержимое не будет заворачиваться вообще,даже если это приведет к переполнению.

max-content:Это значение используется для определения размера в предположении,что доступное пространство бесконечно.min-content:Это значение используется для определения размера в предположении,что доступное пространство бесконечно.

Значение 100% означает,что ширина элемента может быть не больше,чем ограничения содержащего его блока (см.спецификацию свойства width для подробностей о ширине в процентах).

max-content определяет размер, предполагая, что доступное пространство бесконечно. С другой стороны, min-content определяет минимально возможный размер элемента, который не приводит к переполнению содержимого.


max-content проклеивающего ключевое слово представляет внутреннюю ширину или высоту максимального содержания. Для текстового содержимого это означает, что содержимое вообще не будет переноситься, даже если оно вызывает переполнение.

Syntax

/ * Используется как длина * /
width: max-content;
inline-size: max-content;
height: max-content;
block-size: max-content;
/ * используется в дорожках сетки * /
grid-template-columns: 200px 1fr max-content;
/ * Глобальные значения * /
max-content: inherit;
max-content: initial;
max-content: revert;
max-content: revert-layer;
max-content: unset;

Examples

Использование max-content для определения размера коробки

HTML
<div>
  <div>Item</div>
  <div>Item with more text in it which will overflow the fixed width box.</div>
</div>
CSS
#container {
  background-color: #8cffa0;
  padding: 10px;
  width: 200px;
}
.

 item {
  width: max-content;
  background-color: #8ca0ff;
  padding: 5px;
  margin-bottom: 1em;
}
Result

Изменение размера столбцов сетки с помощью max-content

HTML
<div>
  <div>Item</div>
  <div>
    Item with more text in it.
  </div>
  <div>Flexible item</div>
</div>
CSS
#container {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}
#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}
Result

Specifications

Specification
Модуль CSS Box Sizing Level 3
# valdef-width-max-content

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox для Android Opera Android Safari на IOS Samsung Internet
max-content

46

22

79

79

66

3

No

44

11

2

46

46

66

4

43

11

1

5. 0

See also

  • Связанные ключевые слова для определения размеров: min-content , fit-content

CSS

  • max()

    Функция max()CSS позволяет установить наибольшее (самое положительное)значение из списка свойств выражений,разделенных запятыми В первом примере ширина составит

  • max-block-size

    CSS-свойство max-block-size определяет максимальный размер элемента в направлении,противоположном записи,заданной режимом write-mode.

  • max-height

    Свойство max-height CSS устанавливает максимальную высоту элемента.

  • max-inline-size

    Свойство CSS max-inline-size определяет горизонтальный вертикальный максимум блока элемента в зависимости от его режима записи.

  • 1
  • …
  • 633
  • 634
  • 635
  • 636
  • 637
  • …
  • 857
  • Next

fit-content() — CSS: каскадные таблицы стилей ))

.

Функцию можно использовать в качестве размера дорожки в свойствах CSS Grid, где максимальный размер определяется max-content , а минимальный размер — auto , который вычисляется аналогично auto (т. е. minmax (авто, максимальное содержание) ), за исключением того, что размер дорожки ограничивается аргументом , если он больше минимального значения auto .

См. страницу grid-template-columns для получения дополнительной информации о ключевых словах max-content и auto .

Функцию fit-content() также можно использовать в качестве размера блока для ширины , высоты , min-width , min-height , max-width

4 max-9 высота

, где максимальный и минимальный размеры относятся к размеру содержимого.

Функция

fit-content() принимает в качестве аргумента или . 

 /* <длина> значений */
подходящий контент (200px)
подходит-содержание (5 см)
фит-контент(30vw)
фит-контент(100ч)
/* <процентное> значение */
фит-контент(40%)

Значения

<длина>

Абсолютная длина.

<процент>

Процент доступного места на данной оси.

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

Размер столбцов сетки с подходящим содержимым

HTML 
 

  
Ширина элемента равна содержанию.

  <дел>


    Элемент с большим количеством текста. Поскольку его содержимое шире, чем
    максимальная ширина ограничивается 300 пикселями.
  

  
Гибкий элемент
CSS 
 #контейнер {
  отображение: сетка;
  столбцы шаблона сетки: подходящее содержимое (300 пикселей) подходящее содержимое (300 пикселей) 1fr;
  зазор сетки: 5px;
  box-sizing: граница-коробка;
  высота: 200 пикселей;
  ширина: 100%;
  цвет фона: #8cffa0;
  отступ: 10 пикселей;
}
#контейнер > div {
  цвет фона: #8ca0ff;
  отступ: 5px;
}
Результат
Спецификация
CSS Box Size Module Уровень 4 
 CS. IDS.WIDES.WIDEMPERTERPHERTERPERTIORSITER. браузер 
 с включенным JavaScript. Включите JavaScript для просмотра данных. 
 css.properties.grid-template-columns.fit-content 
  
 Таблицы BCD загружаются только в браузере 
 с включенным JavaScript. Включите JavaScript для просмотра данных. 
     
  •  Ключевые слова, связанные с размером:  min-content  ,  max-content  
    • 
   
  •  Связанные свойства сетки CSS:  grid-template  ,  grid-template-rows  ,  grid-template-columns  ,  grid-template-areas  ,  grid-auto-columns 
    

     ,  grid-auto-rows  ,  сетка-автопоток  
    • 
   
  •  Руководство по компоновке сетки:  Размещение на основе линий с помощью CSS Grid  
    • 
   
  •  Руководство по компоновке сетки:  Области шаблона сетки — сокращенные определения определения сетки  
    • 
 
  
 Обнаружили проблему с содержанием этой страницы? 
 
     
  •  Отредактируйте страницу на GitHub.  
    •  
  •  Сообщить о проблеме с содержимым. 
    •  
  •  Посмотреть исходный код на GitHub. 
    •  
 
 Хотите принять участие? Узнайте 
 
, как внести свой вклад. 
 
 Последний раз эта страница была изменена  участниками MDN. 
 
 CSS по ширине соответствует содержимому 
  html



 2 месяца назад 
 
 от Sharqa Hameed 


 Свойство ширины CSS определяет ширину области содержимого элемента. Эта область представляет собой пространство между границей, отступом и полем элемента. Более того, свойство ширины CSS со значением « fit-content » отрегулирует ширину элемента в соответствии с содержимым. 
 
 В этом исследовании объясняется свойство CSS width со значением fit-content. 
  
 Как использовать свойство CSS width со значением fit-content? 
  
 Чтобы использовать свойство CSS width со значением fit-content, проверьте данный синтаксис: 
 
 width: fit-content 
 
   
  Пример  
 
 В HTML добавьте три элемента div с одинаковым именем класса « 

 коробка » и три разных класса « цвет-1 », « цвет-2 » и « цвет-3 » соответственно.  Добавьте элемент 
 внутри каждого элемента div, чтобы добавить содержимое на веб-страницу: 
 
 
 
     
Содержимое по ширине CSS
 
 
 
 
 
     
Hello World!< /p> 
 
 
 
 
     
Командная работа начинается с укрепления доверия. Мы команда, работающая ради общей миссии. 
 
 
 
 
   
 Вот вывод HTML-кода: 
 
 
 

До сих пор мы обсуждали HTML-страницу. Теперь, в следующем разделе, мы будем применять различные стили CSS к элементам HTML, чтобы они выглядели лучше. В текущем примере мы проверим поведение свойства « width », имеющего значение « fit-content » в CSS.
 


 
  Стиль «box» div  
 
 .box { 
     width: fit-content; 
     высота: 50 пикселей; 
     цвет: призрачно-белый; 
     отступ: 6 пикселей; 
     поле: 2 пикселя; 
     размер шрифта: 18 пикселей; 
 } 
 
   
 «  . box  » относится к блоку класса div. Ниже приведены свойства, которые к нему применяются: 
 
     
  • 
 
       
    •  «  width  » свойство со значением «  fit-content  » использует доступное пространство, но не будет превышать содержимое. 
      • 
 
    •  «  height  » — это свойство, определяющее высоту элемента. 
      • 
 
    •  « цвет » определяет цвет шрифта элемента. 
      • 
 
    •  Свойство «  padding  » создает пространство внутри границы элемента или вокруг содержимого. 
      • 
 
    •  « поле » определяет пространство вокруг элемента. 
      • 
 
    •  Свойство «  font-size  » определяет размер шрифта. 
      • 
 
     
    • 
 
 
  Стиль div «color-1»  
 
 .color-1 { 
     background-color: #00ABB3; 
 } 
 
   
 Фоновый цвет  » устанавливается в div « .color-1 ». 
 
  Стиль div «color-2»  
 
 . color-2 { 
     background-color: #083AA9; 
 } 
 
   
  Стиль div «color-3»  
 
 .color-3 { 
     background-color: #4C6793; 
 } 
 
   
 Можно заметить, что ширина элемента установлена ​​равной содержимому: 
 
 
 

Замечательно! Мы успешно изучили использование CSS « ширина » свойство со значением « fit-content ».
 
  
 Заключение 
  
 Свойство ширины CSS позволяет нам использовать несколько значений. Эти значения указаны в процентах, пикселях или более. Чтобы установить его в соответствии с содержимым, можно установить значение « fit-content ». В этом посте описано свойство CSS width со значением fit-content с практической демонстрацией. 



 
 Об авторе 
 
 
 Sharqa Hameed 
  
 Я энтузиаст Linux, я люблю читать каждый блог Linux в Интернете. У меня есть степень магистра в области компьютерных наук, и я увлечен обучением и преподаванием.		
	



	


		

		
Добавить комментарий 
Ваш адрес email не будет опубликован. Обязательные поля помечены *