text-overflow
Vara CSS käsitleb olukordi, kus tekst on kärbitud, kui ta ujutab elemendi kasti. Seda saab kärpida (st lõigata, peita), kuvada ellipsi ('…', Unicode'i vahemiku väärtus U + 2026) või kuvada autori määratud stringi (praegu pole brauseri tuge autori määratletud stringidele).
.ellipsis ( text-overflow: ellipsis; /* Required for text-overflow to do anything */ white-space: nowrap; overflow: hidden; )
Pange tähele, et text-overflow
tekib ainult siis, kui mahuti overflow
vara väärtus on hidden
, scroll
või auto
ja white-space: nowrap;
.
Teksti ületäitumine võib toimuda ainult ploki või sisemise ploki taseme elementidel, kuna elemendi ülevoolu jaoks peab olema laius. Ülevool toimub suunas, mille määravad suuna omadus või seotud atribuudid.
Järgmine demo kuvab text-overflow
atribuudi käitumise koos kõigi võimalike väärtustega. Brauseri tugi on erinev!
Vaadake seda pliiatsit!
Seadistamine overflow
, et scroll
või auto
kuvab kerimisribad paljastada täiendav tekst, samas hidden
ei ole. Peidetud teksti saab valida ellipside valimisega.
Vana kraam
Spetsifikaadi vanas versioonis öeldakse, et saate ellipsi jaoks kasutada pildi URL-i, kuid tundub, et see visati maha.
Seal on näiteks kahe väärtusega süntaks, text-overflow: ellipsis ellipsis;
mis kontrolliks sama konteineri vasakul ja paremal küljel ülevoolu. Ma pole kindel, kuidas seda oleks võimalik saavutada. Ehk koondatud tekst liiga väikesesse konteinerisse? Uus spetsifikatsioon ütleb, et see ja stringi määratlemine on "ohus".
Ma pole kindel, kust see ellipsis-word
tuli. Seda pole spetsifikatsioonis ega muudes dokumentides peale WebPlatform.org.
Varem text-overflow
oli kombinatsiooni text-overflow-mode
ja text-overflow-ellipsis
, kuid mitte enam, omadus, kuid enam mitte ja neid eraldi omadusi pole olemas.
Brauseri tugi
Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
---|---|---|---|---|---|---|
25+ | 5.1+ | 19+ | 12,1+ | IE8 + | 2.1+ | 3,2+ |