Применение ellipsis (...) на многострочном тексте в CSS

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

Для реализации эффекта многоточия после двух строк воспользуйтесь свойствами display: -webkit-box;, -webkit-line-clamp: 2; и -webkit-box-orient: vertical;. Подберите значение max-height таким образом, чтобы текст точно уместился в две строки.

.ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 3em;
}

<div class="ellipsis">
  Этот длинный текст здесь уместится ровно в две строки и завершится многоточием.
</div>

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

Обеспечение адаптивности и согласованности

Совместимость с различными браузерами

Префиксированные свойства -webkit- могут не работать во всех браузерах:

• Оформляйте стили, основываясь на базовых правилах, и дополняйте их для поддержки line-clamp — так вы реализуете прогрессивное улучшение.
• Для определения возможностей браузера используйте правило @supports с -webkit-line-clamp.
• В качестве резервного решения можно использовать JavaScript для браузеров без поддержки Webkit, однако имейте в виду возможное снижение производительности.

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

Адаптация размеров элементов

В условиях адаптивного дизайна размеры элементов часто меняются:

• Применяйте медиазапросы для корректировки max-height в зависимости от размера окна просмотра.
• Адаптируйте -webkit-line-clamp для различных экранных разрешений.
• Тщательно тестируйте стили на читаемость, чтобы избежать проблем с пользовательским интерфейсом.

Использование примесей для ускорения разработки

Примесь SASS существенно упрощает процесс разработки:

@mixin two-line-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Примесь можно добавить в SASS-файлы:

.ellipsis {
  @include two-line-ellipsis;
  max-height: 3em;
}

Критические инсайты

Рассмотрим некоторые тонкости:

Подбор max-height

• Размер max-height определяется исходя из размера шрифта, используйте единицы em.
• Будьте аккуратны с высотой строки, чтобы не допустить переполнения текста.

Вглядываясь в механизм работы

• Изучите статью Криса Койера, чтобы узнать о полезных деталях.
• Углубитесь в изучение свойства text-overflow, оно не ограничивается только добавлением многоточия.

Предотвращение ошибок

• Не используйте white-space: nowrap, так как оно препятствует переносу текста на новую строку.
• Учитывайте особенности локализации: в разных языках текст может занимать разное количество строк.
• Разные языки могут иметь разную длину строки, следовательно многоточие всегда должно быть готово вступить в работу.

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

Важно визуально представлять, как работает механизм "Многоточие при переполнении текста на двух строках":

Поток текста ⚠️: "Это весьма содержательный абзац, который должен быть обр..."
Контейнер 🚿:
| Это весьма содержательн... | <- Первая строка заполнена
| ...ый абзац, который дол     | <- Вторая строка заполнена
Сток 🌀: "..."

Многоточие (...) выступает как сток, препятствуя переполнению и удерживая текст в пределах двух строк.

Применение на практике

Развивайте свои навыки, используя эти советы:

Работа с примерами

• Используйте ZIP-файл с полным набором примеров для обучения.
• Адаптируйте исходный код для более глубокого понимания принципов.

Отладка и исправление

Если возникли проблемы:

• Проверьте, совпадают ли расчеты max-height с размерами шрифтов и высотой строки.
• Используйте инструменты разработчика для тонкой настройки стилей.
• Обращайте внимание на то, как отображается текст на дисплеях с высоким разрешением, например, Retina.

Непрерывное обучение

Оставайтесь в курсе:

• Добавляйте в закладки MDN Web Docs, чтобы всегда иметь актуальную информацию и лучшие рекомендации.
• Принимайте участие в обсуждениях на форумах о CSS, чтобы обмениваться знаниями и опытом.

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

1. Line Clampin' (Truncating Multiple Line Text) | CSS-Tricks — подробное рассмотрение обрезания текста на нескольких строках в CSS с практическими примерами.
2. -webkit-line-clamp – CSS: Cascading Style Sheets | MDN — официальное руководство по использованию -webkit-line-clamp для обрезания текста.
3. text-overflow | Codrops — детальное руководство по text-overflow, включая поддержку браузерами и примеры.
4. Can I use... Support tables for HTML5, CSS3, etc. — проверьте поддержку браузерами для text-overflow и схожих свойств.
5. CSS Overflow Module Level 3 — проект W3C по управлению переполнением в CSS, включая обработку переполнения на нескольких строках.