block-overflowVara kärbib teksti ja näitab rohkem sisu järgmiselt sisestades ellips või kohandatud string pärast ridade arv, mis on seatud max-linesvara.
Atribuut on tutvustatud CSS-i ülevoolumooduli 3. taseme spetsifikatsiooni redaktori mustandiga. See tähendab, et see on praegu eksperimentaalne ja seda peetakse pooleliolevaks tööks. Tegelikult saate jälgida vestlust, mis hõlmab jutte vara ümbernimetamisest.
Süntaks
.module ( block-overflow: (clip | ellipsis | ); max-lines: (); /* required by block-overflow */ )block-overflow aktsepteerib järgmisi väärtusi:
clip: Ei sisesta märki, mis tähistaks rohkem järgitavat teksti. Selle asemel sisu lihtsalt kärbitakse ja lõigatakse ära viimase tähemärgi juures.ellipsis: Kuvab viimase rea lõpus ellipsi (…). See peaks olema renderdatud Unicode'i märgina (U + 2026), kuid selle võib asendada samaväärsega, mis põhineb kasutatava kasutajaagendi sisukeelel ja kirjutamisrežiimil.: Kuvab viimase rea lõpus kohandatud teksti (nt „Loe edasi →”). Spetsifikatsioon ütleb, et User-Agent võib stringi asendada ellipsiga, kui string on “absurdselt” pikk.
See kõik on jällegi eksperimentaalne, pooleliolev töö. Need väärtused võivad muutuda. Või võiks lisada veel. Näiteks on kutsutud üles nutikamaks ellipsiks, mis võib olla võimeline tegema rohkem asju, näiteks teksti kärpimist keskele:
One thing led to another and… yada yada yada, that was that.Kasutage line-clamplühidalt
Me võime saada peaaegu sama, kasutades seda, line-clampmis on block-overflowja max-lines-omaduste lühikirjeldus .
Praegu määratletuna line-clampaktsepteerib see väärtusele siiski ainult ühte arvväärtust max-linesja määrab block-overflowselle kaudselt ellipsis. Seega, kui soovite kärpimiseks kasutada kohandatud stringi, peate selle asemel minema pika vormiga.
Brauseri tugi
Praegu pole ühtegi, kuid võite saada tuge, kasutades WebKiti patenteeritud rakendust line-clamp:
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 14 * | 68 * | Ei | 17 | 5 * |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 * | 85 * | 2,3 * | 5,0–5,1 * |
