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 қасиеті,
ол блок шекарасынан шығып тұрған бөліктерді қиықтайды