Sifa ya text-overflow

Sifa text-overflow huongeza vitone matatu mwishoni mwa maandishi yaliyokatwa kama ishara kwamba maandishi hayukutoshi kwenye block na yamekatwa.

Ili sifa ifanye kazi, maandishi lazima yakatwe kupitia sifa overflow au sifa overflow-x kwa thamani hidden, auto au scroll. Ikiwa imewekwa visible (na hivyo ndivyo ilivyo kwa chaguo-msingi) - text-overflow haitafanya kazi.

Kisarufu

kichagua {
	text-overflow: ellipsis | clip;
}

Thamani

Thamani	Maelezo
`ellipsis`	Huongeza vitone matatu mwishoni mwa maandishi yaliyokatwa.
`clip`	Haiongezi vitone matatu mwishoni (hii ndiyo thamani ya chaguo-msingi, inahitajika kwa kufutilia mbali hatua ya sifa inapohitajika).

Thamani ya chaguo-msingi: clip.

Mfano . Maandishi yanayotoka nje

Katika mfano huu neno refu sana halitakaa vizuri kwenye chombo na litatoka nje ya mipaka yake. Hakuna ukataji unaotokea:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

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

Mfano . Tuongeze sifa ya overflow

Sasa, yote yaliyotoka nje ya mipaka ya chombo, yatakatwa tu:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

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

Mfano . Thamani ya ellipsis

Sasa, kwa nyongeza ya sifa overflow tutaongeza text-overflow kwa thamani ellipsis. Maandishi yaliyokatwa yataongezewa vitone matatu mwishoni:

<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;
}

Mfano . Na mistari ya kusokota

Ikiwa utaweka overflow: auto na text-overflow: ellipsis, basi mstari wa kusokota utaonekana, lakini vitone matatu bado vitaongezwa. Jaribu kusokota mstari wa kusokota kwenye mfano:

<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;
}

Mfano . Ikiwa hakuna maneno marefu sana

Ikiwa hakuna maneno marefu ya kutosha kwa kiasi kwamba yanatoka nje ya mipaka ya chombo, basi hakuna ukataji utakaotokea (hakuna kinachotoka nje). Angalia mfano unaofuata:

<div id="elem">
	Lorem ipsum dolor sit amet adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Mfano . Maandishi kwa mstari mmoja

Hata hivyo, kuna hali ambapo tunataka maandishi yakatwe, ikiwa yana urefu mrefu sana (maandishi kwa ujumla, na si maneno mbalimbali) na yasipeanwe kwenye mstari unaofuata. Hii inafanywa kwa kuongeza sifa white-space kwa thamani nowrap, ambayo itazuia kupelekwa kwa maandishi kwenye mstari mwingine. Angalia mfano, sasa maandishi yamekatwa:

<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;
}

Mfano . Upana kwa asilimia

Ikiwa utaweka upana wa block kwa %, basi ukataji pia utafanya kazi ipasavyo:

<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;
}

Angalia pia

sifa word-break na overflow-wrap,
ambazo huruhusu kuhamisha herufi za neno refu kwenye mstari mpya
sifa hyphens,
ambayo inawasha uhamishaji wa maneno kwa silabi
sifa overflow,
ambayo inakata sehemu zinazotoka nje ya mpaka wa block