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
selektor {
text-overflow: ellipsis | clip;
}
Bahalar
| Baha | Düşündiriş |
|---|---|
ellipsis |
Gysgalan tekstiň ahyryna üç nokat goşýar. |
clip |
Ahyryna üç nokat goşmaýar (bokuça baha, zerurlyk ýüze çykanda häsiýetiň täsirini ýatyrmaq üçin ulanylýar). |
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:
<div id="elem">
Lorem ipsum dolor sit amet
loooooooooooooooooooooooooooooooongword,
consectetur loooooooooooooooooooooooooooooooongword
adipiscing elit.
</div>
#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:
<div id="elem">
Lorem ipsum dolor sit amet
loooooooooooooooooooooooooooooooongword,
consectetur loooooooooooooooooooooooooooooooongword
adipiscing elit.
</div>
#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:
<div id="elem">
Lorem ipsum dolor sit amet
loooooooooooooooooooooooooooooooongword,
consectetur loooooooooooooooooooooooooooooooongword
adipiscing elit.
</div>
#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üň:
<div id="elem">
Lorem ipsum dolor sit amet
loooooooooooooooooooooooooooooooongword,
consectetur loooooooooooooooooooooooooooooooongword
adipiscing elit.
</div>
#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ň:
<div id="elem">
Lorem ipsum dolor sit amet adipiscing elit.
</div>
#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:
<div id="elem">
Lorem ipsum dolor sit amet adipiscing elit.
</div>
#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:
<div id="elem">
Lorem ipsum dolor sit amet
loooooooooooooooooooooooooooooooongword,
consectetur loooooooooooooooooooooooooooooooongword
adipiscing elit.
</div>
#elem {
width: 80%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border: 1px solid red;
}
:
Şeýle-de serediň
-
word-breakweoverflow-wraphäsiýetleri,
uzyn söziň harpyny täze setire geçirmäge rugsat berýär -
hyphenshäsiýeti,
sözleriň bogun boýunça geçmesini açýar -
overflowhäsiýeti,
blokuň çäginden daşary çykan bölekleri gysgýar