Почему текст выталкивает кнопку из flex-контейнера

04.09.2019 · CSS

Почему текст выталкивает кнопку из flex-контейнера

Длинное название товара способно растянуть строку, хотя у соседней кнопки задана ширина. Причина часто в автоматической минимальной ширине flex-элемента: браузер бережёт размер содержимого.

.row { display: flex; }
.title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.button { flex-shrink: 0; }

Назначьте title элементу с текстом внутри строки. Многоточие появится только при ограниченной доступной ширине. Если текст нужно читать целиком, уберите nowrap и вместо обрезки разрешите перенос. Проверьте название без пробелов и увеличение шрифта: кнопка должна оставаться доступной.

Назад в блог

От идеи —
к первому шагу.

Расскажите, что хотите создать.
Обсудим задачу и наметим следующий шаг.