CSS: Обрезка текста с многоточием на конце без изменения HTML

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

Для добавления многоточия в конец усечённого текста применяется CSS-свойство text-overflow: ellipsis:

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<div class="ellipsis" style="width: 100px;">
  В этом месте будет находиться длинный текст, который при необходимости обрежется и завершится многоточием.
</div>

Ширина контейнера задаёт предел, при превышении которого в действие вступает механизм многоточия из-за переполнения.

Принципы работы свойства многоточия

Группа CSS-свойств text-overflow: ellipsis, overflow: hidden и white-space: nowrap дает возможность реализовать появление многоточия. Свойство white-space удерживает текст в одной строке, предотвращая его перенос, в то время как overflow: hidden осуществляет обрезку лишнего. Их взаимодействие содействует возникновению многоточия при превышении заданной ширины контейнера.

Многострочное обрезание и адаптация под размеры экрана

Для многострочной обрезки текста используются сочетания -webkit-line-clamp и -webkit-box-orient: vertical;:

.multiline-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Отметим, что свойство -webkit-line-clamp срабатывает наиболее корректно в браузерах на основе webkit. В связке с адаптивным дизайном и max-width вместо width, размеры контейнера и многоточие будут адекватно отображаться на разных экранах.

Наведение: всё скрытое становится явным

Чтобы при наведении курсора текст полностью раскрывался, вам следует изменить свойства white-space и text-overflow на исходные, обозначив overflow как видимый:

.ellipsis:hover {
  white-space: normal;
  text-overflow: clip;
  overflow: visible;
}

Получившийся эффект наведения смотрится аккуратно и информативно.

Влияние свойства display на многоточие

Свойство display оказывает влияние на работу text-overflow: ellipsis. У инлайновых элементов используйте display: inline-block:

.inline-ellipsis {
  display: inline-block;
  /* Остальные свойства аналогичны .ellipsis */
}

Для блочных элементов достаточно указать display: block.

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

Воспринимайте overflow:hidden как контролёра, обрезающего лишний текст:

Исходный текст:
🎫 [Этот текст слишком длинный, чтобы поместиться здесь]

После применения `overflow:hidden`:
🎫 [Этот текст сли...]

Аналогичное преобразование применимо ко всем элементам, например, к билету:

.ticket {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 200px; /* Ширина билета строго фиксирована */
}

Проверка билета выполнена, и весь текст, выступающий за пределы .ticket, заменён на многоточие.

Навигация краевых случаев и обеспечение совместимости браузеров

При работе с text-overflow: ellipsis всегда обращайте внимание на совместимость браузеров, используя ресурсы, как Can I use.... Обратите внимание на отличия в работе свойства direction: rtl; для языков с направлением письма слева направо.

Доступность и индексация поисковыми системами

Не стоит забывать про доступность – 'ellipsis' выглядит эстетично, но экранным читалкам требуется доступ к полному тексту, а поисковые системы индексируют только то, что видимо. Поэтому ключевые слова и информация должны быть всегда доступны.

Прогрессивные методы обрезки текста

При создании сложных макетов используйте псевдо-элементы CSS или flexbox. Псевдо-элементы могут добавлять дополнительные визуальные элементы к усечённому тексту. Flexbox упрощает управление переполнением текста в контейнерах.

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

1. Свойство CSS text-overflow – W3Schools — Углубленное знакомство с базовыми принципами и примерами.
2. Обрезка строки с многоточием | CSS-Tricks — Практика применения на реальных примерах.
3. overflow – CSS: Каскадные таблицы стилей | MDN — Детальный анализ свойства overflow.
4. Управление длинными словами и URL (Принудительный перенос, перенос по слогам, и т.д.) | CSS-Tricks — Как избежать нарушений в макетах.
5. Полное руководство по Flexbox | CSS-Tricks — Управление содержимым с применением flexbox.
6. Могу ли я использовать... Таблицы поддержки для HTML5, CSS3 и т.д. — Контроль совместимости браузеров для text-overflow.
7. Чистый CSS для многострочного обрезания с многоточием – Hacking UI — Многострочное обрезание текста без применения JavaScript.