Что такое text-overflow: ellipsis и какие CSS-свойства обязательно нужно задать, чтобы оно работало?

Что такое text-overflow: ellipsis?

Это CSS-свойство, которое позволяет обрезать текст, выходящий за границы блока, и добавить в конце многоточие (...). Оно часто используется для однострочных заголовков, кнопок или ячеек таблиц, чтобы текст не ломал вёрстку.

Обязательные условия

Чтобы свойство сработало, необходимо задать три вещи:

• overflow: hidden — скрывает содержимое, выходящее за границы блока.
• white-space: nowrap — запрещает перенос текста на новую строку.
• Фиксированная ширина — контейнер должен иметь явно заданную ширину (width, max-width или flex-basis).

Пример кода

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

Если убрать любое из этих свойств, многоточие не появится — текст либо перенесётся, либо просто обрежется без многоточия.

Вывод

text-overflow: ellipsis — простой и надёжный способ сделать однострочный текст адаптивным и аккуратным. Применяйте его в интерфейсах, где важно сохранить компактность элементов, например, в списках, карточках или меню.