Как урезать текст в заголовке карточки в Flexbox: ellipsis

Быстрый ответ

Чтобы дочерний элемент не выходил за границы рамок родительского в контексте Flexbox, назначьте свойство overflow: hidden; родительскому элементу и min-width: 0; для дочернего. Это обеспечит гибкость дочернего блока и предотвратит его выход за пределы родительского элемента.

.parent { 
  display: flex; 
  overflow: hidden; /* Скрываем *неугомонных* потомков */
}

.child {
  min-width: 0; /* Даём свободу детям */
}

Таким образом, дочерний элемент будет корректно помещаться в границы родительского контейнера.

Контроль переполнения текста

Чтобы управлять текстовым содержимым внутри элемента Flexbox, используйте сочетание min-width: 0;, white-space: nowrap; и text-overflow: ellipsis;. Таким образом, текст не будет переноситься, а при недостатке пространства будут ставиться троеточия.

.child {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden; /* Скрываем *болтливых* потомков */
  text-overflow: ellipsis; /* ..."и они жили долго и счастливо" */
}

Выравнивание высоты колонок в многоколоночных макетах

Свойство flex-grow: 1; позволяет элементам Flexbox равномерно растягиваться и занимать все доступное пространство, обеспечивая равенство высот в многоколоночных макетах.

.card {
  flex-grow: 1; /* Растягиваемся, чтобы занять свою часть пространства */
}

Отзывчивые многоколоночные макеты

Для создания адаптивных макетов с несколькими колонками используйте flex-wrap: wrap; в сочетании с flex-grow или flex-basis. Так элементы будут переходить на следующую строку и адекватно заполнять пространство.

.container {
  display: flex;
  flex-wrap: wrap; /* Расставаться трудно, но иногда это необходимо */
}
.item {
  flex: 1 1 auto; /* Гибкость превыше всего */
}

Визуализация

Проиллюстрируем это на примере сада:

• Забор (🏡): Сдерживает все растения внутри своих границ.
• Растение, которое выходит за забор (🥀): Амбициозно растет за пределами забора.

В контексте Flexbox:

🌼🏡🌸 Обычные растения: [🌼][🌼][🌼] 🌼💢🥀 Выходящие за пределы: [🌼][🏠]

Управлять размерами можно с помощью flex-shrink:

🌼🏡🌸 После применения: [🌼][🌼🌼] 🌼✂️🥀 Обрезание излишнего: [🌼][🌼]

Таким образом, мы поддерживаем наш контейнер в порядке и предотвращаем выпадение элементов за его границы.

Использование overflow

Overflow в динамически изменяемых контейнерах

Временами нам важно, чтобы содержимое самостоятельно регулировало размер контейнера. Например, виджеты на панелях управления должны показывать ценную информацию без ограничений.

.widget {
  display: flex;
  min-height: 100px; /* Минимальная высота для *самостоятельных* единиц */
}

Подробнее об этом расскажет наш спикер на видео

Размещение отступов между flex-элементами

Мы можем создать необходимое пространство в многоколоночных макетах, добавив отступы к flex-элементам. Это обеспечит визуальное "дыхание" без влияния на перенос элементов.

.item {
  margin: 5px; /* Личное пространство для каждого элемента */
}

Использование вложенных флекс-контейнеров для сложных макетов

Применение вложенных флекс-контейнеров с display: flex; и flex-direction: column; идеально подходит для создания сложных структур, например, вертикально ориентированных карточек.

.card-container {
  display: flex;
  flex-direction: column; /* Расположение элементов сверху вниз */
}

Будьте в курсе

Понимание свойства min-width

С осторожностью относитесь к min-width: auto; — это может привести к неожиданным результатам, делая flex-элементы слишком "жесткими". Используйте min-width: 0;, чтобы сохранять гибкость вашего макета при ограниченном пространстве.

Кроссбраузерность

Тестируйте макет в разных браузерах, чтобы избежать возможных несоответствий. В некоторых случаях могут потребоваться специфические коррективы для достижения однородного отображения.

/* Для старых версий браузеров, которые могут вести себя непредсказуемо */
.item {
  flex-shrink: 0;
}

Overflow и доступность

Применяя overflow: hidden, учитывайте его влияние на видимость и доступность контента. Предусмотрите альтернативные способы доступа к скрытым данным.

Полезные материалы

1. Использование Flexbox: смешивание старого и нового для лучшей поддержки в браузерах | CSS-Tricks — исследуем управление Flexbox, не забывая о обратной совместимости.
2. Основные принципы flexbox – CSS | MDN — основы Flexbox от авторитетного источника, Mozilla.
3. Полное руководство по Flexbox | CSS-Tricks — всё, что вам необходимо знать, чтобы стать экспертом в Flexbox.
4. html – Почему flex элементы не сжимаются меньше своего содержимого? – Stack Overflow — мнение сообщества о тонкостях размеров flex элементов.
5. Полное руководство по CSS Flex Box | от Ghost Together | Medium — глубокое руководство по Flexbox, которое сделает вас профессионалом.
6. GitHub – philipwalton/flexbugs: список проблем с flexbox и способы их решения — перечень известных проблем в Flexbox и способы их устранения.