Верстка · Middle · Запитання 5 з 75
Усередині flex-елемента довгий текст із text-overflow: ellipsis не обрізається, а розпирає колонку. Як виправити?
- ✓Правильна відповідь: Задати flex-елементу
min-width: 0(абоoverflow: hidden) - 2Задати flex-елементу
flex-shrink: 0, щоб він не стискався - 3Замінити
display: flexнаdisplay: inline-flexу контейнера
Пояснення
У flex-елементів за замовчуванням min-width: auto - вони не стискаються менше за свій мінімальний контент. Довге слово чи рядок із white-space: nowrap розпирає елемент. min-width: 0 дозволяє стискання, і тоді ellipsis спрацьовує. flex-shrink: 0 зробить лише гірше.