text-overflowOmaisuus CSS käsitellään tilanteita, joissa teksti on leikattu, kun se vuotaa elementin ruutuun. Se voidaan leikata (eli katkaista, piilottaa), näyttää ellipsin ('…', Unicode-alueen arvo U + 2026) tai näyttää tekijän määrittämän merkkijonon (ei nykyistä selaintukea tekijän määrittelemille kielille).
.ellipsis ( text-overflow: ellipsis; /* Required for text-overflow to do anything */ white-space: nowrap; overflow: hidden; )Huomaa, että text-overflowvain silloin, kun säiliön overflowomaisuus on arvo hidden, scrolltai autoja white-space: nowrap;.
Tekstin ylivuoto voi tapahtua vain lohko- tai inline-block-tason elementeillä, koska elementillä on oltava leveys voidakseen ylivuotoa editoida. Ylivuoto tapahtuu suuntaan, joka määritetään suuntaominaisuuden tai siihen liittyvien attribuuttien avulla.
Seuraava esittely näyttää text-overflowominaisuuden käyttäytymisen mukaan lukien kaikki mahdolliset arvot. Selaimen tuki vaihtelee!
Kun asetat overflow- scrolltai autonäyttöön tulevat vierityspalkit, jotta lisäteksti paljastuu, mutta hiddenei. Piilotettu teksti voidaan valita valitsemalla ellipsit.
Vanhaa tavaraa
Vanhassa spesifikaation versiossa sanotaan, että voit käyttää kuvan URL-osoitetta ellipsille, mutta näyttää siltä, että se pudotettiin.
On esimerkiksi kaksiarvoinen syntakse text-overflow: ellipsis ellipsis;, joka hallitsisi saman säiliön vasemman ja oikean puolen ylivuotoa. En ole varma, miten se olisi mahdollista saavuttaa. Ehkä keskitetty teksti liian pieneen astiaan? Uuden spesifin mukaan tämä sekä merkkijonon määrittely ovat "vaarassa".
En ole varma mistä ellipsis-wordtuli. Sitä ei ole spesifikaatiossa tai missään muussa dokumentaatiossa kuin WebPlatform.org-sivustossa.
text-overflowOmaisuutta käytetään olla lyhennys yhdistelmä text-overflow-modeja text-overflow-ellipsis, mutta ei enää ja ne erilliset ominaisuudet eivät ole.
Selaimen tuki
| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 25+ | 5.1+ | 19+ | 12.1+ | IE8 + | 2.1+ | 3.2+ |