Решение: text-overflow: ellipsis не работает в CSS

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

Для корректной работы text-overflow: ellipsis убедитесь, что установлены следующие свойства:

1. display: block или inline-block,
2. width – указана конкретная ширина,
3. overflow: hidden – скрытие лишнего содержимого,
4. white-space: nowrap – отсутствие переносов.

Возьмём пример на CSS:

.ellipsis {
  display: inline-block;  
  width: 100px;  
  overflow: hidden;  
  white-space: nowrap;  
  text-overflow: ellipsis;
}

Теперь давайте посмотрим, как это будет выглядеть в HTML:

<div class="ellipsis">Этот текст в итоге сократится до многоточия...</div>

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

Многоточие на нескольких строках (мы углубляемся)

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

.multiline-ellipsis {
  display: -webkit-box;  
  -webkit-line-clamp: 3;  
  -webkit-box-orient: vertical;    
  overflow: hidden;   
  width: 250px;
  height: 150px;
}

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

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

Отображение ваших стилей может варьироваться в разных браузерах. Тестируйте их! Если свойство webkit-line-clamp непонятно некоторым браузерам, можно использовать JavaScript для программного решения данной проблемы.

Особые случаи и закрепление полученных навыков

Если текст упорно стремится выйти за границы <pre> или любого другого контейнера при активации многоточия, то свойство word-wrap: break-word; поможет словам оставаться внутри заданных границ:

.pre-wrap {
  white-space: pre-wrap;
  word-wrap: break-word;  
  overflow-wrap: break-word;
}

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

Каждое свойство CSS влияет на text-overflow: ellipsis лишь совместно, как команда. Наглядно это выглядит так:

| CSS Свойство       | Эффект                        | Инструмент |
| ------------ | ----------------------- | ------------ |
| display: block;     | 📦 (Подготовка основы)     | Молот Программиста |
| white-space: nowrap; | 🔒 (Уложено в одну строку)   | Щит Защиты Текста |
| overflow: hidden;    | 🚫 (Сокрытие лишнего)         | Инструмент Невидимости |
| text-overflow: ellipsis; | ... (Намёк на продолжение) | Факел Указатель |

Пренебрегая любым из первых трёх свойств, вы лишаете многоточие возможности вклиниться в процесс.

Устранение обычных препятствий

Если text-overflow: ellipsis ведёт себя аномально, проверьте, нет ли следующих помех:

• Ограничения контейнера: max-width или padding родительского элемента могут мешать. Учтите это.
• Наследование стилей: свойства, такие как white-space, могут передаваться от родительских элементов. Проверьте каскад.
• Динамический контент: содержимое, которое изменяется, может потребовать корректировки размеров контейнера.
• Поддержка RTL: для языков с право-налевой письменностью использование direction: rtl; в сочетании с text-overflow поможет избежать проблем.

Расширенные варианты уверенного маневрирования

Дополнительные рекомендации по улучшению работы text-overflow: ellipsis:

• Адаптивный дизайн: используйте проценты или единицы ширины обзора (vw) для width, чтобы ваш текст автоматически подстраивался под размер экрана.
• Flexbox: при использовании flex-контейнера установите min-width: 0; чтобы предотвратить распирание содержимого.
• Содержимое разной длины: иногда JavaScript приходится корректировать отображение текста, когда стандартных возможностей CSS недостаточно.

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

1. text-overflow – CSS: Cascading Style Sheets | MDN — здесь на MDN вы найдёте подробное руководство по свойству text-overflow.
2. text-overflow | CSS-Tricks — на сайте CSS-Tricks вы найдёте практические советы и примеры использования text-overflow.
3. CSS text-overflow property — W3Schools расскажет об особенностях синтаксиса и совместимости браузеров для text-overflow.
4. No Title Found — на Stack Overflow можно обнаружить обсуждения и ответы на вопросы, связанные с text-overflow: ellipsis.
5. text-overflow | Codrops — на сайте Codrops CSS Reference представлен обзор свойства text-overflow.
6. Can I use... Support tables for HTML5, CSS3, etc — здесь вы можете проверить, какие браузеры поддерживают text-overflow на сайте Can I use.