Flexbox и обрезание текста

Flexbox и обрезание текста

От автора: представим: у нас есть строка текста внутри дочернего элемента flex-контейнера. Вы хотите сделать так, чтобы текст обрезался с добавлением многоточия, а не вел себя, как блоковый элемент (или на крайний случай можно прятать выступающий текст). И вдруг все идет не по плану! Макет не работает, а родительский блок не сжимается. А ведь Flexbox должен был сделать работу с макетом проще!

К счастью есть решение (причем стандартизированное). Для этого придется воспользоваться свойствами, не относящимися к flexbox.

Что мы хотим сделать

GIF изображение показывает, как обрезается текст при уменьшении дочернего элемента.

Возможная проблема

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

GIF изображение показывает, как текст препятствует сжатию родительского блока. Контейнер не просто может не сжиматься, он может стать слишком широким.

Проблема в дочерних элементах (flex-элементах)

Странно… когда текст лежит напрямую внутри дочернего элемента, все работает нормально:

Проблема возникает, когда добавляются элементы типа:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Решение – необходимо добавить свойство 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

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree