Свойство text-overflow

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

Речь идет именно о тексте, а не о картинках и других блоках, см. для этого overflow.

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

Синтаксис

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

Значения

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

Примеры

Пример . Ничего не задано или задан text-overflow: visible

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

p {
	width: 200px;
	overflow: visible;
	border: 1px solid red;
}

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

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

p {
	width: 200px; 
	overflow: hidden; или overflow-x: hidden - разницы нет 
	border: 1px solid red;
}

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

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

p {
	width: 200px; 
	overflow: hidden; или overflow-x: hidden - разницы нет 
	-o-text-overflow: ellipsis; 
	text-overflow: ellipsis; 
	border: 1px solid red;
}

Пример . Если задать overflow: auto и text-overflow: ellipsis

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

p {
	width: 200px; 
	overflow: auto; или overflow-x: auto - разницы нет 
	-o-text-overflow: ellipsis; 
	text-overflow: ellipsis; 
	border: 1px solid red;
}

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

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

p {
	width: 200px; 
	overflow: hidden; или overflow-x: hidden - разницы нет 
	-o-text-overflow: ellipsis; 
	text-overflow: ellipsis; 
	border: 1px solid red;
}

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

p {
	width: 200px; 
	overflow: hidden; или overflow-x: hidden - разницы нет 
	white-space: nowrap; 
	-o-text-overflow: ellipsis; 
	text-overflow: ellipsis; 
	border: 1px solid red;
}

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

p {
	width: 80%; 
	overflow: hidden; или overflow-x: hidden - разницы нет 
	white-space: nowrap; 
	-o-text-overflow: ellipsis; 
	text-overflow: ellipsis; 
	border: 1px solid red;
}

Откройте этот пример по следующей ссылке и поуменьшайте окно браузера - текст будет обрезаться именно по текущему размеру блока и будет добавляться троеточие.