Свойство text-overflow работает в сочетании с другими CSS-свойствами для создания эффекта обрезания текста и добавления многоточия. 1

Условия работы: должна быть определена ширина блока-контейнера, элемент должен иметь значения overflow: hidden и white-space: nowrap. 2

Значения свойства text-overflow:

• clip (по умолчанию) — текст обрезается ровно по краю родительского блока; 4
• ellipsis — при обрезке текста в конце строки добавляется многоточие «…», показывая незавершённость предложения. 4

Пример совместного использования свойств:

.container {  width: 200px;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;  overflow-wrap: break-word;  border: 1px solid #000;}

В этом примере white-space: nowrap устанавливает, что текст отображается в одну строку, без переноса. 1 Overflow: hidden скрывает текст, выходящий за границы контейнера. 1 Text-overflow: ellipsis добавляет многоточие в конце обрезанного текста. 1 Overflow-wrap: break-word переносит длинные слова, если не хватает места. 1