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