Teksto perpildymas - CSS-gudrybės

Anonim

text-overflowCSS 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-overflowtik tada, kai konteineris yra overflownuosavybė turi vertę hidden, scrollar autoir 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-overflownuosavybės elgesys, įskaitant visas galimas vertes. Naršyklės palaikymas skiriasi!

Patikrinkite šį rašiklį!

Nustatymas overflow, kad scrollarba autobus rodomas slinkties atskleisti papildomą tekstą, o hiddenne. 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-overflowNaudojamas turtas būtų sutrumpinimas iš kartu text-overflow-modeir 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+