«как сделать div, чтобы он сжимался под контент»
«ширина элемента по содержимому»
«автоширина, но не на всю ширину»
В CSS есть специальная штука, которая решает это —
fit-content.Что делает:
Заставляет элемент сжиматься под содержимое, но не становиться шире своего контейнера.
Элемент остаётся с
display: block (занимает свою строку), но ширина подстраивается под контент вместо растягивания на всю ширину.Карточка сжимается по ширине текста и идеально центрируется.
.alert-card {
/* 1. Сжать блок строго по содержимому */
width: fit-content;
/* 2. Центровка без вмешательства в родительский контейнер */
margin-inline: auto;
/* 3. Не допускать выхода за границы экрана на мобильных */
max-width: 90vw;
padding: 2rem;
background: var(--bg-surface);
border-radius: 12px;
}Где это использовать:
- Центрированные кнопки, которые не должны растягиваться на всю ширину
- Карточки, которые подстраиваются под свой контент
- Модальные окна, которые увеличиваются вместе с текстом
- Теги и бейджи
- Элементы навигации
@WebDev_Plus