Почему текст внезапно ломает grid и вылезает за контейнер? — 27 мая 2026 г. в 15:28:23.639
Почему текст внезапно ломает grid и вылезает за контейнер? Очень частый баг в CSS Grid: ставишь overflow: hidden, ellipsis, 1fr, а текст всё равно раздвигает layout и игнорирует ограничения. Кажется, что проблема в overflow. .title { overflow: hidden; text-overflow: ellipsis; } Но проблема часто вообще не в этом. У grid-элементов по умолчанию стоит min-width: auto, из-за чего элемент отказывается сжиматься меньше контента. Решение — явно разрешить сжатие. .grid-item { min-width: 0; } После этого начинают нормально работать: .title { white-space: nowrap; text-overflow: ellipsis; } Важно: min-width: 0 нужно ставить именно на grid/flex item, а не обязательно на сам текстовый элемент. Особенно критично для card-layout, dashboard, table, navbar и любых grid/flex интерфейсов с длинным текстом. Code Ready | #совет