text-overflow хусусияти

text-overflow хусусияти кесилган матн охирига матн блокга сиғмагани ва кесилгани белгиси сифатида уч нуқта қўшади.

Хусусиятнинг ишлаши учун матн overflow хусусияти ёки overflow-x хусусияти орқали hidden, auto ёки scroll қийматларида кесилиши керак. Агар visible берилган бўлса (сустки холда шундай) - text-overflow ишламayди.

Синтаксис

селектор {
	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 хусусиятини қўшамиз

Ҳозир контейнер чегараларидан чиқиб кетган ҳар бир нарза oddiy кесилади:

<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 хусусияти,
бу блок чегарасидан чиқиб кетган қисмларни кесади