Для того чтобы установить ширину блока по содержимому (для текстового контента, например), можно использовать свойство display: inline-block
. С таким значением свойства display
блок будет занимать только необходимую для контента ширину.
Пример кода CSS для установки ширины блока по содержимому:
.container {
display: inline-block;
}
Если вы хотите установить ширину не для тектового элемента, а для блока с другим типом контента (например, изображение), то можете использовать свойство max-width
, которое ограничивает максимальную ширину элемента.
Пример кода CSS для установки максимальной ширины блока по содержимому:
.container {
max-width: max-content;
}
Также можно использовать свойство width: fit-content
, которое установит ширину блока по максимальной ширине содержимого.
Пример кода CSS для установки ширины блока по максимальной ширине содержимого:
.container {
width: fit-content;
}
Заметьте, что поддержка свойства fit-content
не полностью распространена, поэтому убедитесь, что ваша целевая аудитория использует браузеры с поддержкой этого свойства.