Teksti üleküllus - CSS-trikid

Anonim

text-overflowVara 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-overflowtekib ainult siis, kui mahuti overflowvara väärtus on hidden, scrollvõi autoja 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-overflowatribuudi käitumise koos kõigi võimalike väärtustega. Brauseri tugi on erinev!

Vaadake seda pliiatsit!

Seadistamine overflow, et scrollvõi autokuvab kerimisribad paljastada täiendav tekst, samas hiddenei 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-wordtuli. Seda pole spetsifikatsioonis ega muudes dokumentides peale WebPlatform.org.

Varem text-overflowoli kombinatsiooni text-overflow-modeja 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+