Как обрезать текст по ширине и по количеству строк? Часть 1: простые и продвинутые способы

Как обрезать текст по ширине и по количеству строк?

Простые и продвинутые способы
Умная обрезка с Яваскриптом

Обрезать текст — не лучшее дизайнерское решение. Но если всё‑таки надо — вот как это делается в вёрстке:

Как обрезать текст по ширине и по количеству строк?

Простые и продвинутые способы
Умная обрезка с Яваскриптом

Простые стандартные способы

Самая простая и быстрая обрезка по ширине и по строкам — с помощью стандартных свойств ЦСС. На 2024 год работает во всех современных браузерах. Быстро, универсально и надёжно:

.name {
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.preview {
  max-width: 250px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; /* Кол-во строк */
}

Александр Константинович Бонч‑Бруевич

Фестиваль «Молодая Молодость Сургута» объявляет конкурс талантов: запишите двухминутное видео с демонстрацией одного лайфхака, который помогает вам на улицах Сургута и получите возможность выиграть автомобиль

Нестандартная обрезка

Когда вид стандартной обрезки не устраивает, её оформляют самостоятельно. Например, используют псевдоэлемент с градиентом. Кода больше, он сложнее:

.name {
  max-width: 250px;
  overflow: hidden;
  position: relative;
}

.name:after {
  content: '';
  width: 1ch; /* Ширина — один символ */
  position: absolute;
  right: 0;
  top: -.3em;
  bottom: -.3em;
  background: linear-gradient(to left, #fff, transparent);
  pointer-events: none; /* Не мешает клику */
}

Александр Константинович Бонч‑Бруевич

Обрезка градиентом по строкам ещё сложнее, придётся выносить интерлиньяж в переменную:

.preview {
  --lines: 4;
  --line-height: 1.2;
  font-size: 1em;
  line-height: var(--line-height);
  overflow: hidden;
  max-height: calc(1em * (var(--line-height) * var(--lines)));
  position: relative;
}

.preview:after {
  content: '';
  width: 100%;
  height: calc(1em * var(--line-height));
  background-image: linear-gradient(to right, transparent, #fff);
  position: absolute;
  bottom: 0;
  right: 0;
  pointer-events: none;
}

При нестандартной обрезке доступен весь арсенал ЦСС‑свойств, можно придумать много вариантов дизайна. Но и вероятность что‑нибудь сломать выше, чем со стандартными свойствами обрезки. Не забывайте проверять вёрстку в разных браузерах и на разных устройствах.

В следующих советах попробуем прокачать обрезку, сделать её умнее и удобнее для разработчика и пользователя. Если у вас уже есть идеи улучшений — пишите в коменты.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.