CSS Обрезка Многострочного Текста: Полное Руководство

Свойство CSS line-clamp предоставляет наиболее элегантное решение для усечения многострочного текста с многоточием. Комбинируя display: -webkit-box, -webkit-box-orient: vertical, -webkit-line-clamp: 2 и overflow: hidden, вы можете легко ограничить текст определенным количеством строк, автоматически добавляя многоточие в конце.

Содержание

• Понимание многострочного усечения текста
• Современное решение с line-clamp
• Совместимость с браузерами и резервные решения
• Альтернативные решения
• Практические примеры реализации
• Лучшие практики и рекомендации

Понимание многострочного усечения текста

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

Согласно Mozilla Developer Network, свойство CSS line-clamp “позволяет ограничить содержимое блока указанным количеством строк” и автоматически добавляет многоточие для указания на продолжение текста. Это особенно полезно для:

• Описаний товаров в интернет-магазинах
• Предварительных просмотров статей в новостных лентах
• Пользовательского контента с ограничением по символам
• Проектирования интерфейсов на основе карточек с ограниченным пространством

Современное решение с line-clamp

Свойство line-clamp является наиболее прямым подходом для многострочного усечения текста. Вот как его реализовать:

Полная CSS-реализация

.multi-line-truncate {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* Количество строк для отображения */
  overflow: hidden;
  text-overflow: ellipsis;
}

Разбор свойств

• display: -webkit-box - Включает гибкую модель блока
• -webkit-box-orient: vertical - Указывает вертикальную ориентацию текста
• -webkit-line-clamp: 2 - Ограничивает текст 2 строками (может быть любое число)
• overflow: hidden - Обрезает любое содержимое, выходящее за пределы контейнера
• text-overflow: ellipsis - Добавляет символ многоточия (…) при усечении текста

Как отмечено на CSS-Tricks, “свойство line-clamp усекает текст до указанного количества строк” и эта комбинация свойств создает желаемый эффект.

Синтаксис и значения

Свойство line-clamp принимает несколько значений:

• <integer> - Указывает максимальное количество строк (например, 2, 3, 5)
• none - Без ограничения по строкам
• block-ellipsis - Настраивает поведение многоточия

Примечание: Версия с префиксом -webkit- (-webkit-line-clamp) работает во всех основных браузерах, что делает ее практичным выбором, несмотря на нестандартный префикс.

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

Текущая поддержка браузерами

Свойство line-clamp имеет отличную поддержку в современных браузерах, но существуют некоторые ограничения:

• Chrome/Edge/Opera: Полная поддержка с -webkit-line-clamp
• Safari: Полная поддержка с -webkit-line-clamp
• Firefox: Ограниченная поддержка (экспериментальная в некоторых версиях)
• Internet Explorer: Поддержка отсутствует
• Opera Mini: Ограниченная поддержка

Как указано в базе данных Can I Use, свойство “будет содержать текст в заданном количестве строк при использовании в сочетании с display: -webkit-box.”

Стратегия резервного CSS-решения

Вы можете реализовать прогрессивное улучшение с определением возможностей CSS:

/* Резервное решение для браузеров, не поддерживающих line-clamp */
.text-truncate {
  display: block;
  overflow: hidden;
  /* Простое усечение без ограничения по строкам */
}

/* Современная поддержка line-clamp */
@supports (-webkit-line-clamp: 2) or (line-clamp: 2) {
  .text-truncate {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

Альтернативные решения

Решения на основе JavaScript

Для более широкой совместимости с браузерами JavaScript-библиотеки предоставляют надежные альтернативы:

Clamp.js

Легковесное JavaScript-решение для ограничения строк с кросс-браузерной поддержкой:

<script src="https://cdn.jsdelivr.net/npm/clamp-js@2.0.2/clamp.min.js"></script>
<script>
  element = document.getElementById("myElement");
  $clamp(element, {clamp: 2});
</script>

Superclamp

Как упоминалось в исследованиях, Superclamp “поддерживает все реальные браузеры и IE11+” и “оптимизирован для производительности, и поддерживает теги внутри ограниченного элемента.”

Чистые CSS-альтернативы

Для браузеров, не поддерживающих line-clamp, можно использовать более сложные решения только на CSS:

Усечение на основе высоты

.height-truncate {
  position: relative;
  max-height: 3em; /* Приблизительная высота для 2 строк */
  overflow: hidden;
  line-height: 1.5em;
}

.height-truncate::after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  background: white;
  padding-left: 4px;
}

Решение на основе Grid

.grid-truncate {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  overflow: hidden;
}

.grid-truncate::before {
  content: "...";
  grid-row: 2;
  justify-self: end;
  align-self: end;
}

Практические примеры реализации

Пример с предоставленным текстом

Вот как применить решение line-clamp к вашему конкретному примеру:

<div class="text-preview">
  Ultrices natoque mus mattis, aliquam, cras in pellentesque
  tincidunt elit purus lectus, vel ut aliquet, elementum nunc
  nunc rhoncus placerat urna! Sit est sed! Ut penatibus turpis
  mus tincidunt! Dapibus sed aenean, magna sagittis, lorem velit
</div>

.text-preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 300px;
  line-height: 1.4;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

Это отобразит именно то, что вы хотите:

Ultrices natoque mus mattis, aliquam, cras in pellentesque
tincidunt elit purus lectus, vel ut aliquet, elementum...

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

Для адаптивных дизайнов вы можете регулировать количество строк в зависимости от размера экрана:

.responsive-truncate {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

@media (max-width: 768px) {
  .responsive-truncate {
    -webkit-line-clamp: 2;
  }
}

@media (max-width: 480px) {
  .responsive-truncate {
    -webkit-line-clamp: 1;
  }
}

Миксин для Sass/Less

Для более легкого повторного использования в вашем проекте:

@mixin line-clamp($lines: 2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;
  overflow: hidden;
}

// Использование:
.text-truncate {
  @include line-clamp(2);
}

Лучшие практики и рекомендации

Вопросы производительности

• CSS-решение: Более производительное, так как не требует выполнения JavaScript
• Высота строки: Обеспечивайте одинаковую высоту строки для точного подсчета строк
• Ширина контейнера: Контейнер должен иметь определенную ширину для предсказуемого поведения

Вопросы доступности

Имейте в виду, что усечение текста может повлиять на доступность:

• Скринридеры могут не правильно объявлять усеченный контент
• Пользователи могут пропустить важную информацию, которая была обрезана
• Рассмотрите возможность предоставления функциональности “Читать больше” для усеченного контента

Тестирование в разных браузерах

Как отмечено в результатах исследований, “един кросс-браузерное решение - использовать js afaik” для полной совместимости. Тестируйте вашу реализацию в разных браузерах:

• Chrome, Firefox, Safari, Edge
• Мобильные браузеры
• Старые версии браузеров, если вы поддерживаете устаревших пользователей

Вопросы контента

• HTML-структура: Ограничение строк лучше всего работает с простым текстовым контентом
• Сложная разметка: Вложенные элементы могут вызывать непредвиденное поведение
• Юникод-символы: Некоторые специальные символы могут влиять на разрыв строк

Профессиональный совет: Согласно GeeksforGeeks, “свойство -webkit-line-clamp - это удобный способ ограничить текст определенным количеством строк и добавить многоточие” и является рекомендуемым подходом для большинства современных веб-проектов.

Заключение

Свойство CSS line-clamp предоставляет наиболее элегантное решение для многострочного усечения текста с многоточием в современных браузерах. Используя комбинацию display: -webkit-box, -webkit-box-orient: vertical, -webkit-line-clamp: 2 и overflow: hidden, вы можете легко достичь желаемого эффекта ограничения текста определенным количеством строк с автоматическим добавлением многоточия.

Для максимальной совместимости:

1. Используйте CSS-решение line-clamp для современных браузеров
2. Реализуйте CSS-запросы @supports для постепенного ухудшения
3. Рассмотрите JavaScript-библиотеки, такие как Clamp.js, для старых браузеров
4. Всегда тестируйте на вашем целевом ландшафте браузеров

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

Источники

1. line-clamp | CSS-Tricks
2. line-clamp - CSS | MDN
3. CSS line-clamp | Can I Use
4. Multi-Line Truncation with Pure CSS | CSS-Tricks
5. How to Apply an Ellipsis to Multiline Text in CSS | GeeksforGeeks
6. CSS Line-Clamp — The Good, the Bad and the Straight-up Broken | Medium
7. Clamping lines without ‘-webkit-line-clamp’ | Stack Overflow