min-width: минимальная ширина и сжатие элемента
min-width задаёт нижнюю границу ширины и помогает объяснить, почему элемент иногда не сжимается внутри гибкой раскладки.
Назначение
min-width задаёт нижнюю границу ширины и помогает объяснить, почему элемент иногда не сжимается внутри гибкой раскладки.
Как это работает
У flex- и grid-элементов автоматический минимум может зависеть от содержимого. Явное min-width:0 часто разрешает текстовому элементу стать уже своей длинной строки.
Пример
<style>
.row{display:flex;max-width:20rem;gap:8px}.text{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.icon{flex:none}
</style>
<div class="row"><span class="icon">Статья:</span><span class="text">Очень длинное название учебного материала без потери всей раскладки</span></div>Что должно получиться
Текстовая часть сжимается в доступное место и получает многоточие. Короткая метка сохраняет свою ширину, а контейнер не растягивается вслед за содержимым.
Граница применения и частая ошибка
Не устраняйте переполнение только обрезкой всей страницы. Сначала найдите элемент, которому мешает автоматический минимальный размер, и определите, нужен перенос или локальная прокрутка.
Самостоятельная проверка
Удалите min-width:0 у текстовой части и сравните поведение в узкой области. Добавьте длинный адрес и убедитесь, что многоточие появляется только в предназначенном для этого тексте.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.