Xüsusiyyət text-overflow

text-overflow xüsusiyyəti mətnin blokda sığmaması və kəsilməsi əlaməti olaraq kəsilmış mətnin sonuna üç nöqtə əlavə edir.

Xüsusiyyətin işləməsi üçün mətn overflow və ya overflow-x xüsusiyyətləri ilə hidden, auto və ya scroll qiymətlərində kəsilməlidir. Əgər visible təyin edilibsə (standart vəziyyətdə belədir) - text-overflow işləməyəcək.

Sintaksis

cssselektor {
  text-overflow: ellipsis | clip;
}

Qiymətlər

Standart qiymət: clip.

Nümunə . Həddi aşan mətn

Bu nümunədə çox uzun söz konteynerdə sığmayacaq və onun sərhədlərindən kənara çıxacaq. Heç bir kəsmə baş vermir:

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

Результат:

Nümunə . Overflow xüsusiyyətini əlavə edək

İndi konteynerin sərhədlərindən kənara çıxan hər şey sadəcə kəsiləcək:

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

Результат:

Nümunə . Ellipsis qiyməti

İndi overflow xüsusiyyətinə əlavə olaraq text-overflow xüsusiyyətini də ellipsis qiymətində əlavə edirik. Kəsilmış mətmin sonuna üç nöqtə əlavə olunacaq:

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

Результат:

Nümunə . Sürüşdürmə zolaqları ilə

Əgər overflow: auto və text-overflow: ellipsis təyin etsəniz, sürüşdürmə zolağı peyda olacaq, amma üç nöqtə yenə də əlavə olunacaq. Nümunədə sürüşdürmə zolağını sürüşdürməyə cəhd edin:

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

Результат:

Nümunə . Əgər çox uzun sözlər yoxdursa

Əgər konteynerin sərhədlərindən kənara çıxacaq qədər uzun sözlər yoxdursa, heç bir kəsmə baş verməyəcək (heç nə kənara çıxmır). Aşağıdakı nümunəyə baxın:

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

Результат:

Nümunə . Bir sətirdə mətn

Lakin, elə hallar olur ki, mətn çox uzun olduqda kəsilsin (ayrı-ayrı sözlər deyil, ümumi mətn) və növbəti sətirə keçməsin. Bu, white-space xüsusiyyətini nowrap qiymətində əlavə etməklə həll olunur, bu mətmin digər sətirə keçməsini qadağan edir. Nümunəyə baxın, indi mətn kəsilir:

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

Результат:

Nümunə . Faizlə eni

Əgər blokun enini % ilə təyin etsəniz, kəsmə yenə də düzgün işləyəcək:

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

Результат:

Həmçinin bax