# Свойство text-overflow

Свойство `text-overflow` добавляет троеточие в конец обрезанного текста в знак того, что текст не помещался в блок и был обрезан.

Для работы свойства текст должен быть обрезан через свойство `overflow` или свойство `overflow-x` в значении `hidden`, `auto` или `scroll`. Если задано `visible` (а так и есть по умолчанию) - `text-overflow` работать не будет.

## Синтаксис

`селектор { text-overflow: ellipsis | clip; }`

## Значения

Значение | Описание
--- | ---
`ellipsis` | Добавляет в конец обрезанного текста троеточие.
`clip` | Не добавляет троеточие в конец (это значение по умолчанию, нужно для отмены действия свойства при необходимости).

Значение по умолчанию: `clip`.

## Пример . Вылезающий текст

В данном примере очень длинное слово не поместится в контейнер и вылезет за его границы. Обрезания не происходит:

`<div id="elem"> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur ещеоднооченьдлинноооооооооооооооооооооооооеслово adipiscing elit. </div>` `#elem { width: 200px; overflow: visible; border: 1px solid red; }`

:

## Пример . Добавим свойство overflow

Сейчас все, что вылезло за границы контейнера, просто обрежется:

`<div id="elem"> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur ещеоднооченьдлинноооооооооооооооооооооооооеслово adipiscing elit. </div>` `#elem { width: 200px; overflow: hidden; border: 1px solid red; }`

:

## Пример . Значение ellipsis

Сейчас в дополнение к свойству `overflow` добавим еще и `text-overflow` в значении `ellipsis`. Обрезанному тексту добавится троеточие в конец:

`<div id="elem"> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur ещеоднооченьдлинноооооооооооооооооооооооооеслово adipiscing elit. </div>` `#elem { width: 200px; overflow: hidden; text-overflow: ellipsis; border: 1px solid red; }`

:

## Пример . С полосами прокрутки

Если задать overflow: auto и text-overflow: ellipsis, то появится полоса прокрутки, но троеточие по-прежнему будет добавлено. Попробуйте прокрутить полосу прокрутки в примере:

`<div id="elem"> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur ещеоднооченьдлинноооооооооооооооооооооооооеслово adipiscing elit. </div>` `#elem { width: 200px; overflow: auto; text-overflow: ellipsis; border: 1px solid red; }`

:

## Пример . Если нет очень длинных слов

Если нет настолько длинных слов, чтобы они вылазили за границу контейнера, то обрезания не произойдет (ничего же не вылазит). Посмотрите следующий пример:

`<div id="elem"> Lorem ipsum dolor sit amet adipiscing elit. </div>` `#elem { width: 200px; overflow: hidden; text-overflow: ellipsis; border: 1px solid red; }`

:

## Пример . Текст в одну строку

Однако, бывают ситуации, когда мы хотим, чтобы текст обрезался, если он слишком длинный (текст вообще, а не отдельные слова) и не переносился на следующую строку. Это делается с помощью добавления свойства `white-space` в значении `nowrap`, которое запретит перенос текста на другую строку. Посмотрите на пример, теперь текст обрезается:

`<div id="elem"> Lorem ipsum dolor sit amet adipiscing elit. </div>` `#elem { width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border: 1px solid red; }`

:

## Пример . Ширина в процентах

Если задать ширину блока в %, то обрезание тоже будет работать корректно:

`<div id="elem"> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur ещеоднооченьдлинноооооооооооооооооооооооооеслово adipiscing elit. </div>` `#elem { width: 80%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border: 1px solid red; }`

:

## Смотрите также

- свойства `word-break` и `overflow-wrap`,
  которые позволяют перенести буквы длинного слова на новую строку
- свойство `hyphens`,
  которое включает переносы слов по слогам
- свойство `overflow`,
  которое обрезает вылезающие за границу блока части

← →
↑
en ru