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

Результат:

Сондай-ақ қараңыз