Text-overflow häsiýeti

text-overflow häsiýeti gysgalan tekstiň ahyryna, tekstiň bloka sygmandygy we gysgalandygyny bildirmek üçin, üç nokat goşýar.

Häsiýetiň işlemegi üçin tekst overflow ýa-da overflow-x häsiýetleri arkaly, hidden, auto ýa-da scroll bahasynda gysgalan bolmaly. visible (bokuça baha) girizilse - text-overflow işlemez.

Sintaksis

cssselektor {
  text-overflow: ellipsis | clip;
}

Bahalar

Bokuça baha: clip.

Mysal . Çykýan tekst

Bu mysalda uzyn söz konteýnera sıgmas we onuň çäklerinden daşary çykar. Gysgalanma bolmaýar:

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

Результат:

Mysal . Overflow häsiýetini goşalyň

Indi konteýneriň çäklerinden daşary çykan zadyň hemmesi ýöne gysgalanar:

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

Результат:

Mysal . Ellipsis bahasy

Indi overflow häsiýetine goşmaça text-overflow häsiýetini, ellipsis bahasynda goşalyň. Gysgalan tekstiň ahyryna üç nokat goşular:

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

Результат:

Mysal . Sürgüli zolaklar bilen

Eger overflow: auto we text-overflow: ellipsis girizilse, onda sürgüli zolak peýda bolar, ýöne üç nokat ýene-de goşular. Mysaldaky sürgüli zolagy synap görüň:

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

Результат:

Mysal . Eger gaty uzyn sözler ýok bolsa

Eger konteýneriň çäklerinden daşary çykmak üçin ýeterlikde uzyn sözler ýok bolsa, onda gysgalanma bolmaz (çünki hiç zat daşary çykmaýar). Indiki mysala serediň:

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

Результат:

Mysal . Bir setirli tekst

Şonda-da, tekst has uzyn bolsa (ýöne aýratyn sözler däl, tekst umumy), indiki setire geçmesin we gysgalansyn diýýän ýagdaýlar hem bolýar. Bu white-space häsiýetini nowrap bahasynda goşmak arkaly edilýär, bu tekstifiň beýleki setire geçmegini gadagan eder. Indi tekst gysgalanýar:

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

Результат:

Mysal . Prosentdaky ini

Blokuň ini %-da girizilse, gysgalanma işjeň bolar:

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

Результат:

Şeýle-de serediň