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