Свойство 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
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

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

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

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

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	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
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	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
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	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
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 80%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Вижте също

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