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

Ключевое слово 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

Browser compatibility

See also

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

• 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 высота

Функция

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

Значения

<длина>

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

<процент>

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

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

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

HTML

 

  
Ширина элемента равна содержанию.
  <дел>
  Элемент с большим количеством текста. Поскольку его содержимое шире, чем
    максимальная ширина ограничивается 300 пикселями.
  
  
Гибкий элемент