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 касиети,
ал блокунун чегинен сыртка чыккан бөлүктөрдү кесип таштайт