Text-overflow касиети

text-overflow касиети блокко сыябаган жана кесилген тексттин аягында текст кесилгенин билдирүү үчүн үч чекит кошот.

Бул касиеттин иштөөсү үчүн текст overflow касиети же overflow-x касиети менен hidden, auto же scroll маанилеринде кесилиши керек. Эгерде visible берилсе (жана демейки абалда ушундай) - text-overflow иштебейт.

Синтаксис

cssтандоочу {
  text-overflow: ellipsis | clip;
}

Маанилер

Демейки маани: clip.

Мисал . Сыртка чыккан текст

Бул мисалда абдан узун сөз контейнерге сыябайт жана анын чектеринен сыртка чыгат. Кесилүү болбойт:

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

Результат:

Мисал . overflow касиетин кошолу

Азыр контейнердин чектеринен сыртка чыккандардын баары жөнөкөй эле кесилет:

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

Результат:

Мисал . ellipsis мааниси

Азыр overflow касиетине кошумча text-overflow касиетин ellipsis маанисинде кошолу. Кесилген тексттин аягына үч чекит кошулат:

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

Результат:

Мисал . Сургуч тилкелери менен

Эгерде overflow: auto жана text-overflow: ellipsis белгиленсе, анда сургуч тилкеси пайда болот, бирок үч чекит дагы эле кошулат. Мисалдагы сургуч тилкесин сурап көрүңүз:

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

Результат:

Мисал . Эгерде өтө узун сөздөр жок болсо

Эгерде контейнердин чегинен сыртка чыгуучу узун сөздөр болбосо, анда кесилүү болбойт (чыга турган нерсе жок). Төмөнкү мисалды караңыз:

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

Результат:

Мисал . Бир саптагы текст

Бирок, биз текст (жалпы эле текст, жеке сөздөр эмес) өтө узун болсо кесилиши жана кийинки сапка которулбошу келген учурлар болот. Бул white-space касиетин nowrap маанисинде кошуу менен жүзөгө ашат, ал текстти башка сапка которууга тыюу салат. Мысалды караңыз, азыр текст кесилет:

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

Результат:

Мисал . Процент менен туурасы

Эгерде блокунун туурасын % менен белгилесек, анда кесилүү дагы туура иштейт:

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

Результат:

Ошондой эле караңыз