Својство 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,
које одсеца делове који излазе преко границе блока