Справочник HTML & CSS

text-overflow

Как обрезается текст, который не помещается: резко или с многоточием.

Синтаксис

text-overflow: ellipsis;

Значения

Параметр	Тип	Описание
clip	keyword	Обрезается по краю (по умолчанию).
ellipsis	keyword	Обрезается с `…` в конце.

Примеры

Многоточие в одну строку требует трёх свойств вместе:

<style>
  .name {
    width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid lightgray;
  }
</style>
 
<p class="name">A very long product name that does not fit</p>

Обрезка после нескольких строк через -webkit-line-clamp:

<style>
  .clamp {
    width: 220px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
</style>
 
<p class="clamp">This description is cut after the second line, and an ellipsis shows that there is more text that does not fit.</p>

Примечания

text-overflow работает только вместе с overflow: hidden и текстом, который не может переноситься (white-space: nowrap). Префикс -webkit- в многострочном варианте обязателен, но работает он во всех браузерах.

См. также

white-space — Что делать с пробелами и переносами строк из исходного кода и можно ли переносить строки.
overflow — Что делать с содержимым, которое не помещается в элемент.

Вопросы и ответы по теме

В учебнике

Переполнение и слои — Что делать, когда содержимое не помещается в блок — overflow, прокрутка, многоточие — и как z-index решает, какой элемент лежит сверху.

Спасибо, что читаете!