Уласцівасць 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
	ооооооооооооооооооооооооооооочэньдлiнноеслово,
	consectetur ещеодноочэньдлiнноооооооооооооооооооооооооеслово
	adipiscing elit.
</div>

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

Прыклад . Дадамо ўласцівасць overflow

Зараз усё, што вылезлівае за межы кантэйнера, проста абрэжацца:

<div id="elem">
	Lorem ipsum dolor sit amet
	ооооооооооооооооооооооооооооочэньдлiнноеслово,
	consectetur ещеодноочэньдлiнноооооооооооооооооооооооооеслово
	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
	ооооооооооооооооооооооооооооочэньдлiнноеслово,
	consectetur ещеодноочэньдлiнноооооооооооооооооооооооооеслово
	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
	ооооооооооооооооооооооооооооочэньдлiнноеслово,
	consectetur ещеодноочэньдлiнноооооооооооооооооооооооооеслово
	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
	ооооооооооооооооооооооооооооочэньдлiнноеслово,
	consectetur ещеодноочэньдлiнноооооооооооооооооооооооооеслово
	adipiscing elit.
</div>

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

Глядзіце таксама

уласцівасці word-break і overflow-wrap,
якія дазваляюць перанесці літары доўгага слова на новы радок
уласцівасць hyphens,
якое ўключае пераносы словаў па складах
уласцівасць overflow,
якое абрэзае вылезліваючыя за мяжу блока часткі