Как справляться с коротким и длинным контентом в CSS [часть 2]

9 февраля 2021 г.

1 минута

Введение

В этой части мы рассмотрим типовые ситуации, в которых возникает проблема со слишком длинным или слишком коротким контентом.

Примеры

1) Карточка профиля

Простой пример, в котором мы не можем заранее предсказать длину имени. Как же нам тогда поступить?

enter image description here

/* Решение 1 */
.card__title {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* Решение 2 */
.card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Можно обрезать текст еще в первой строке, а можно растянуть его на несколько и только потом усечь.

2) Навигационные элементы

Частая проблема, если делать многоязычный сайт. Иногда возникает ситуация, что какое-то слово (в нашем случае это "About") значительно длиннее при раскладке LTR (left-to-right) чем RTL (right-to-left). Тогда мы получаем слишком маленькую интерактивную зону клика, что не есть хорошо.

enter image description here

Для решения данной ситуации достаточно не забывать использовать min-width.

.nav__item {
  min-width: 50px;
}

enter image description here

3) Продукты в корзине покупателя

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

enter image description here

Такое обычно решается добавлением margin к внутреннему блоку с текстом или добавлением padding к блоку-обложке.

.product__name {
  margin-right: 1rem;
}

4) Flexbox и длинный контент

Если пример из прошлого пункта показался вам слишком простым, то сейчас вы поймете, что не все вещи бывают такими очевидными. Рассмотрим следующий пример:

enter image description here

HTML:

Ahmad Shadeed
  
  Follow

CSS:

.user {
  display: flex;
  align-items: flex-start;
}

.user__name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

Вот что произойдет, если имя станет слишком длинным: enter image description here

Казалось бы: почему так? Мы ведь сделали все, о чем говорили в первой части данного топика, но получилось совсем не то, чего мы ожидали.

Все дело в том, что по умолчанию флекс-элементы не могут сжиматься меньше длины своего контента. Для решения этой проблемы нужно установить min-width:

.user__meta {
  /* other styles */
  min-width: 0;
}

Онлайн-пример (классы немного отличаются, но суть та же): https://codepen.io/kava13/pen/YzpqLoG

Заключение

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

Александр Ковалец

5 лет назад