text-overflow хусусияти

text-overflow хусусияти кесилган матн охирига матн блокга сиғмагани ва кесилгани белгиси сифатида уч нуқта қўшади.

Хусусиятнинг ишлаши учун матн overflow хусусияти ёки overflow-x хусусияти орқали hidden, auto ёки scroll қийматларида кесилиши керак. Агар visible берилган бўлса (сустки холда шундай) - text-overflow ишламayди.

Синтаксис

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 хусусиятини қўшамиз

Ҳозир контейнер чегараларидан чиқиб кетган ҳар бир нарза oddiy кесилади:

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

Результат:

Ҳам қаранг