От автора: представим: у нас есть строка текста внутри дочернего элемента flex-контейнера. Вы хотите сделать так, чтобы текст обрезался с добавлением многоточия, а не вел себя, как блоковый элемент (или на крайний случай можно прятать выступающий текст). И вдруг все идет не по плану! Макет не работает, а родительский блок не сжимается. А ведь Flexbox должен был сделать работу с макетом проще!
К счастью есть решение (причем стандартизированное). Для этого придется воспользоваться свойствами, не относящимися к flexbox.
Что мы хотим сделать
GIF изображение показывает, как обрезается текст при уменьшении дочернего элемента.
Возможная проблема
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее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; } |
Проблема возникает, когда добавляются элементы типа:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее|
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.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
