Обрезка текста до двух строк в div с помощью CSS

Быстрый ответ

Для ограничения текста внутри div, рамками двух строк, определите CSS-свойство line-height, отвечающее за высоту одной строки. Затем установите max-height равным удвоенному значению line-height. Используйте overflow: hidden; для скрытия текста, выходящего за пределы блока, и text-overflow: ellipsis; для отображения многоточия при обрезании текста. Например:

.two-lines {
  display: block;
  line-height: 1.2em;
  max-height: 2.4em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="two-lines">
  Здесь много текста, что подчеркивает его ограничение двумя строками. Если текст обрезается, в конце появляется многоточие.
</div>

Заметьте, что из-за применения white-space: nowrap; текст не переносится на новую строку. Для добавления многоточия в многострочные блоки понадобится применение дополнительных CSS-свойств.

Глубокое понимание CSS

Адаптация на различных экранах

При адаптивной вёрстке, многоточие должно отображаться корректно не зависимо от ширины div. Используйте вендорно-специфичные свойства CSS так, чтобы текст был обрезан по высоте, соответствующей лимиту строк, и это должно работать независимо от количества символов или ширины элемента.

.multi-line-ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

Текст будет адаптироваться к двум или трем строкам в зависимости от размеров экрана, а многоточие уведомит о наличии дополнительного контента.

Подробнее об этом расскажет наш спикер на видео

Тестирование крайних случаев

Учтите изменчивость, вызванную изменением размера окна браузера или шрифта — ваше решение должно быть универсальным и гибким.

Недостатки свойства line-clamp

Обратите внимание, что не все браузеры поддерживают -webkit-line-clamp. Проверьте совместимость и предусмотрите альтернативные решения для устаревших версий браузеров.

Визуализация

Наглядно представьте текст как длинный свиток, который нужно поместить в двух ячейках шкафа.

• Шкаф (🗄): [Ячейка 1, Ячейка 2]
• Свиток (📜): "Чем продолжительнее текст, тем сложнее его уложить в ограниченное пространство!"

При помощи text-overflow: ellipsis; мы гарантируем идеальное размещение текста.

div.yourClass {
  height: calc(2 * line-height);
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Теперь текст выглядит аккуратно и упаковано.

• 🗄: [ "Чем продолжительнее...", "текст, тем..."]

Альтернатива: JavaScript

Когда стоит рассмотреть

Рассматривайте использование JavaScript, если при помощи CSS невозможно достичь желаемого результата. Он может быть полезен для динамических настроек.

Подход с использованием JavaScript

Для измерения и обрезания текста можно использовать такие библиотеки, как Shave.js или jQuery.dotdotdot.

Поиск оптимального баланса

Необходимо убедиться, что использование JavaScript не снижает производительность системы и не ухудшает взаимодействие пользователя с сайтом.

Полезные материалы

1. text-overflow | CSS-Tricks
2. -webkit-line-clamp | MDN
3. text-overflow в CSS | W3Schools
4. Ограничение длины текста до n строк с использованием CSS | Stack Overflow
5. Can I use... | Поддержка HTML5, CSS3 и других технологий
6. Полное руководство по Flexbox | CSS-Tricks