CSS эффект многоточия: применение на второй строке

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

Для того чтобы применить многоточие после второй строки текста с использованием CSS, воспользуйтесь свойствами display: -webkit-box;, -webkit-line-clamp: 2; и -webkit-box-orient: vertical;, специфичными для WebKit. В таком случае ваши текстовые блоки будут ограничены двумя строками, а "за бортом" оставшийся текст будет замаскирован под многоточие. Важно помнить, что такое решение характерно для WebKit и может быть не поддержано некоторыми браузерами. Чтобы всё отображалось корректно, установите значение max-height, равное удвоенному значению line-height.

.two-line-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Количество отображаемых строк */
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 3.2em; /* Должно соответствовать двум line-height */
}

<div class="two-line-ellipsis">
  Длинный текст исследует бездну да и его необходимо укротить…
</div>

Примечание: значение max-height в классе .two-line-ellipsis должно быть подобрано в соответствии с установленным у вас line-height.

Создание эффекта ellipsis в различных браузерах: инструменты и особенности

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

JavaScript-библиотеки: dotdotdot к вашим услугам

Одним из универсальных кроссбраузерных способов является использование JavaScript-библиотеки, такой как dotdotdot. Её интеграция проста, она предоставляет универсальное решение для работы с динамическим контентом, изменением размеров и вложенными элементами.

$('.multiline-text').dotdotdot({
  height: 100, // Максимальная высота текстового блока
});

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

Чисто CSS-метод урезания текста с помощью псевдоэлементов

Креативный подход, основанный на CSS, включает в себя использование псевдоэлемента ::after, позиционированного абсолютно, для создания эффекта ellipsis. Он не так гибок, как методы, базирующиеся на WebKit или JavaScript, однако отлично справляется со статическим контентом.

.ellipsis-fallback::after {
  content: '...'; /* Многоточие */
  position: absolute;
  bottom: 0;
  right: 0; /* Конец текста, извините */
}

Будущее свойство max-lines

Нельзя не упомянуть о возможном внедрении свойства max-lines от W3C, которое в будущем может стать стандартом. А по сию пору, давайте придерживаться принципа постепенного улучшения: обеспечим всех пользователей базовым функционалом, улучшая его для тех, у кого браузеры посвежее.

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

Представьте себе книгу на полке, где открыта только для взгляда первая пара строк:

Корешок книги (📚): [Строка 1, Строка 2, ..., загадка дальнейших страниц]

Многоточие (...) как бы завлекает вас, обещая продолжение истории:

Фрагмент истории: [Строка 1, Строка 2...]

Благодаря CSS, этот фрагмент становится ещё более интригующим, поскольку история ограничивается озвучиванием двух первых строк:

.book-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* "Двустрочная история" в действии */
  -webkit-box-orient: vertical;
}

И вам уже невтерпеж узнать, что же будет дальше...:

📚: ["Жили-были", "в далёкой-далёкой стране..."]

Мастерство обрезания текста: изыскание нюансов

Работа с переполнением текста накладывает ряд особенностей: учёт локализации, отзывчивость и размеры контейнера. Давайте их рассмотрим.

Локализация и длина слов

На многоязычных сайтах многоточие при различной длине слов в разных языках может выглядеть неоднозначно. Учтите это, чтобы сохранять стабильность дизайна при различных локализациях.

Разработка в среде адаптивных экранов

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

Якорные ссылки и эффект ellipsis

При использовании обрезания текста в ролях якорных ссылок важно, чтобы эффект усечения был чётко виден. CSS приблизительно тот же, однако правильная проработка текстового блока обеспечит надёжное восприятие.

.truncated-link {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

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

1. line-clamp | CSS-Tricks – CSS-Tricks – Обстоятельное руководство CSS-Tricks по работе со свойством line-clamp.
2. text-overflow – CSS: Cascading Style Sheets | MDN – Руководство MDN Web Docs по свойству text-overflow.
3. Ограничение длины текста до n строк с помощью CSS – Stack Overflow – Практические решения от сообщества Stack Overflow о том, каким образом можно ограничить текст до n строк.
4. Can I use... Support tables for HTML5, CSS3, etc – Посмотрите, как поддерживается свойство line-clamp в различных браузерах.
5. CSS Overflow Module Level 3 – Возникло желание узнать побольше о том, что задумывает рабочая группа CSS в отношении свойства overflow?
6. text-overflow | Codrops – Советы и примеры от Codrops CSS Reference по text-overflow.