Обрезаем длинную строку и добавляем троеточие…

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

Теория
Вся функциональность сниппета завязана, в основном, на свойстве 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; // Для поддержки не-вебкит-браузеров, высота строки * количество строк