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

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

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

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

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

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

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

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

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

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

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

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

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

<div class="flex-parent">
  <div class="flex-child">
 Text to truncate here.
  </div>
  <div class="flex-child">
 Other stuff.
  </div>
</div>
/* Текст напрямую лежит внутри flex-элемента,
 Который является его оберткой */
.flex-child
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

<div class="flex-parent">
  <div class="flex-child">
 <h2>Text to truncate here.</h2>
  </div>
  <div class="flex-child">
 Other stuff.
  </div>
</div>
/* Теперь текст является заголовком,
  Чтобы все работало, текст нужно обрезать */
.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

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

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

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

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

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

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

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

Получить

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree