Свойство 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,
которое обрезает вылезающие за границу блока части