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

csskichagua {
  text-overflow: ellipsis | clip;
}

Thamani

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:

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

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

Результат:

Mfano . Tuongeze sifa ya overflow

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

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#elem {
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid red;
}

Результат:

Angalia pia