block-overflowNepremičnine skrajša besedilo in kaže več vsebine sledi z vstavitvijo tremi pikami ali po meri niz po številu vrstic, ki je, ki jih je max-linespremoženje.
Lastnost je bila predstavljena v urednikovem osnutku specifikacije CSS Overlow Module Level 3. To pomeni, da je trenutno eksperimentalno in se šteje za delo v teku. Pravzaprav lahko spremljate pogovor, ki vključuje klepet o preimenovanju nepremičnine.
Sintaksa
.module ( block-overflow: (clip | ellipsis | ); max-lines: (); /* required by block-overflow */ )block-overflow sprejema naslednje vrednosti:
clip: Ne vstavi znaka, ki bi označeval več besedila, ki naj mu sledi. Namesto tega je vsebina pri zadnjem znaku zgolj okrnjena in odrezana.ellipsis: Prikaže elipso (...) na koncu zadnje vrstice. Upodabljati naj se kot znak Unicode (U + 2026), vendar bi ga lahko nadomestil enakovreden glede na jezik vsebine in način pisanja uporabniškega agenta.: Na koncu zadnje vrstice prikaže besedilo po meri (npr. »Preberi več →«). Specifikacija pravi, da lahko uporabniški agent niz nadomesti z elipso, če je niz "absurdno" dolg.
Vse to je spet eksperimentalno delo, ki poteka. Te vrednosti bi se lahko spremenile. Ali pa bi lahko dodali še več. Na primer, bili so pozivi k "pametnejši" elipsi, ki bi lahko naredila več stvari, na primer obrezovanje besedila na sredini:
One thing led to another and… yada yada yada, that was that.Uporabite line-clampna kratko
Pridobimo lahko približno isto stvar, line-clampki je okrajšava za lastnosti block-overflowin max-lines.
Kot je trenutno definirana, čeprav line-clample sprejme eno številsko vrednost max-linesin implicitno postavlja block-overflowna ellipsisvrednosti. Torej, če želite uporabiti niz po meri za okrnitev, potem morate raje uporabiti dolg obrazec.
Podpora za brskalnik
Trenutno nobenega, lahko pa dobite nekaj podpore z lastniško izvedbo WebKita line-clamp:
Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.
Namizje
| Chrome | Firefox | IE | Rob | Safari |
|---|---|---|---|---|
| 14 * | 68 * | Ne | 17. | 5 * |
Mobilni / tablični računalnik
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 * | 85 * | 2,3 * | 5,0-5,1 * |