От автора: представим: у нас есть строка текста внутри дочернего элемента flex-контейнера. Вы хотите сделать так, чтобы текст обрезался с добавлением многоточия, а не вел себя, как блоковый элемент (или на крайний случай можно прятать выступающий текст). И вдруг все идет не по плану! Макет не работает, а родительский блок не сжимается. А ведь Flexbox должен был сделать работу с макетом проще!
К счастью есть решение (причем стандартизированное). Для этого придется воспользоваться свойствами, не относящимися к flexbox.
Что мы хотим сделать
GIF изображение показывает, как обрезается текст при уменьшении дочернего элемента.
Возможная проблема
GIF изображение показывает, как текст препятствует сжатию родительского блока. Контейнер не просто может не сжиматься, он может стать слишком широким.
Проблема в дочерних элементах (flex-элементах)
Странно… когда текст лежит напрямую внутри дочернего элемента, все работает нормально:
|
1 2 3 4 5 6 7 8 |
<div class="flex-parent"> <div class="flex-child"> Text to truncate here. </div> <div class="flex-child"> Other stuff. </div> </div> |
|
1 2 3 4 5 6 7 |
/* Текст напрямую лежит внутри flex-элемента, Который является его оберткой */ .flex-child white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } |
Проблема возникает, когда добавляются элементы типа:
|
1 2 3 4 5 6 7 8 |
<div class="flex-parent"> <div class="flex-child"> <h2>Text to truncate here.</h2> </div> <div class="flex-child"> Other stuff. </div> </div> |
|
1 2 3 4 5 6 7 |
/* Теперь текст является заголовком, Чтобы все работало, текст нужно обрезать */ .flex-child > h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } |
Решение – необходимо добавить свойство min-width: 0; к flex-элементу
Или какое-либо другое значение для min-width. Без этого flex-элемент, содержащий другие текстовые элементы внутри себя, не будет сжиматься.
Когда я впервые столкнулся с этой проблемой, я нашел способ Pen by AJ Foster. Автор пишет: «По спецификации текст выше не должен сжаться до нуля, если слишком сильно сжать родительский блок. Так как в классе .subtitle ширина задана на 100%, а min-width: auto, то flexbox делает контейнер больше, чем нам нужно.»
Способ работает в Chrome, Opera и Firefox. В Safari текст обрезался даже без свойства min-width (вопреки спецификации).
Работает: Текст лежит напрямую внутри дочернего элемента
Не работает: Текст в дочернем элементе обернут в тег <h2>
Работает: Текст обернут в <h2>, но flex-элементу задано свойство min-width
Автор: Chris Coyier
Источник: //css-tricks.com/
Редакция: Команда webformyself.
