В современном мире существуют тысячи устройств с различными размерами экранов и их пропорциями: от мелких смартфонов до огромных широкоформатных мониторов. Для приятного использования веб-сайта он должен быть максимально адаптивным под каждый из экранов. И для этого очень часто нужно обрезать текст в одну или несколько строк.
Теория
Вся функциональность сниппета завязана, в основном, на свойстве 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-разработки. Понравилась статья? Расскажи об этом друзьям!