Выбор ответа Middle Вёрстка на практике обновлено
Многоточие не работает во флексе
Вопрос
Имя пользователя должно обрезаться многоточием, но вместо этого строка распирает карточку. Что исправит?
.row { display: flex; gap: 8px; }
.name {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Добавить .name { min-width: 0; }. У флекс-элемента min-width: auto по умолчанию: он не сжимается уже своего содержимого, а длинная строка без переносов очень широкая. min-width: 0 разрешает сжатие, и overflow с text-overflow начинают работать. display: block у…
Варианты ответа
- Добавить
.name { display: block; } - Заменить
flex: 1наflex-grow: 2 - Добавить
.name { min-width: 0; }правильный ответ - Добавить
.row { overflow: visible; }
Разбор
У флекс-элемента min-width: auto по умолчанию: он не сжимается уже своего содержимого, а длинная строка без переносов очень широкая. min-width: 0 разрешает сжатие, и overflow с text-overflow начинают работать. display: block у флекс-элемента ничего не меняет. flex-grow про рост, а не про сжатие. overflow: visible у родителя и так по умолчанию.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.