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

Теория

Вся функциональность сниппета завязана, в основном, на свойстве overflow: hidden: мы визуально обрезаем текст, а дальше работает с видимой частью. При необходимости мы можем отобразить остальную часть текста. (например, при :hover)

Однострочный текст

Этот тип обрезания текста в одну строку полезен, например, для вывода заголовков либо названий товаров. И это делается довольно просто:

  white-space: nowrap; // Выводим текст в одну строку
  overflow: hidden; // Обрезаем то, что выходит за рамки блока
  text-overflow: ellipsis; // Добавляем троеточие вконце текста

Многострочный текст

А этот тип полезен при выводе превью товара, статьи и тп. В коде ниже – полноценная поддержка, с троеточием, есть только у браузеров, которые поддерживают движок WebKit. Для других браузер существует заглушка, которая обрезает строки согласно line-height и max-height. Эта реализация уже посложнее:

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; // Количество строк
  line-height: 20px; // Для поддержки не-вебкит-браузеров, высота одной строки
  max-height: 60px; // Для поддержки не-вебкит-браузеров, высота строки * количество строк

Примеры

Пример реализации обрезания текста в одну и несколько строк:

See the Pen ✂️ Обрезаем длинную строку и добавляем троеточие… by nickdeny (@nickdeny) on CodePen.

Также подписывайтесь на наш офигенный Телеграм-канал 🤘: постим крутые статьи, авторские мнения, новости и шутки из мира Web-разработки. Понравилась статья? Расскажи об этом друзьям!