text-overflow
CSS nuosavybė susijusi su atvejais, kai tekstas yra nukirpti, kai ji perpildymo šio elemento langelį. Jis gali būti nukirptas (ty iškirptas, paslėptas), rodyti elipsę („…“, „Unicode Range“ reikšmė U + 2026) arba rodyti autoriaus apibrėžtą eilutę (šiuo metu naršyklė nepalaiko autoriaus apibrėžtų eilučių).
.ellipsis ( text-overflow: ellipsis; /* Required for text-overflow to do anything */ white-space: nowrap; overflow: hidden; )
Atkreipkite dėmesį, kad text-overflow
tik tada, kai konteineris yra overflow
nuosavybė turi vertę hidden
, scroll
ar auto
ir white-space: nowrap;
.
Teksto perpildymas gali įvykti tik blokų arba įterptinių blokų lygio elementuose, nes norint, kad jis būtų perpildytas, elementas turi būti pločio. Perpildymas vyksta kryptimi, kurią nustato krypties ypatybė arba susiję atributai.
Šioje demonstracijoje rodomas text-overflow
nuosavybės elgesys, įskaitant visas galimas vertes. Naršyklės palaikymas skiriasi!
Patikrinkite šį rašiklį!
Nustatymas overflow
, kad scroll
arba auto
bus rodomas slinkties atskleisti papildomą tekstą, o hidden
ne. Paslėptą tekstą galima pasirinkti pasirinkus elipses.
Seni daiktai
Senoje specifikacijos versijoje sakoma, kad galite naudoti elipsės atvaizdo URL, tačiau atrodo, kad jis buvo numestas.
Yra dviejų reikšmių sintaksė, pvz. text-overflow: ellipsis ellipsis;
, Kuri valdytų to paties konteinerio perpildymą kairėje ir dešinėje. Nesu tikras, kaip tai būtų įmanoma pasiekti. Galbūt sutelktas tekstas per mažame inde? Naujasis specialistas sako, kad tai, kaip ir stygos apibrėžimas, yra "rizikinga".
Nesu tikras, iš kur ellipsis-word
. Tai nėra specifikacijoje ar jokiuose kituose dokumentuose, išskyrus „WebPlatform.org“.
text-overflow
Naudojamas turtas būtų sutrumpinimas iš kartu text-overflow-mode
ir text-overflow-ellipsis
, bet ne daugiau ir tie atskiri savybės nėra.
Naršyklės palaikymas
„Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
---|---|---|---|---|---|---|
25+ | 5.1+ | 19+ | 12.1+ | IE8 + | 2.1+ | 3.2+ |