Prepad bloku - Triky CSS

Anonim

block-overflowNehnuteľnosť skráti text a naznačuje ďalší obsah nasleduje vložením bodky alebo vlastné reťazec po niekoľkých riadkov, ktoré je stanovené max-linesmajetku.

Táto vlastnosť bola zavedená v koncepte editora špecifikácie CSS Overflow Module úrovne 3. To znamená, že je to momentálne experimentálne a považuje sa to za rozpracované. V skutočnosti môžete sledovať konverzáciu, ktorá obsahuje klebety o úplnom premenovaní nehnuteľnosti.

Syntax

.module ( block-overflow: (clip | ellipsis | ); max-lines: (); /* required by block-overflow */ )

block-overflow akceptuje nasledujúce hodnoty:

  • clip: Nezadáva znak označujúci ďalší text, ktorý treba sledovať. Namiesto toho je obsah iba skrátený a odrezaný od posledného znaku.
  • ellipsis: Na konci posledného riadku zobrazí elipsu (...). Mal by sa vykresľovať ako znak Unicode (U + 2026), ale mohol by byť nahradený ekvivalentom na základe použitého jazyka obsahu a režimu písania používaného agenta.
  • : Zobrazí vlastný text (napr. „Prečítajte si viac →“) na konci posledného riadku. Špecifikácia hovorí, že User-Agent môže nahradiť reťazec elipsou, ak je reťazec „absurdne“ dlhý.

Toto všetko je opäť experimentálna, prebiehajúca práca. Tieto hodnoty sa môžu meniť. Alebo by sa dalo pridať viac. Vyskytli sa napríklad výzvy na „inteligentnejšiu“ elipsu, ktorá by mohla robiť viac vecí, napríklad orezať text uprostred:

One thing led to another and… yada yada yada, that was that.

Použite line-clampv krátkosti

Môžeme získať takmer to isté, line-clampčo je skratka pre block-overflowa max-linesvlastnosti.

Ako je v súčasnosti definované, line-clampakceptuje však iba jednu číselnú hodnotu max-linesa implicitne sa nastavuje block-overflowna ellipsishodnotu. Ak teda chcete na skrátenie použiť vlastný reťazec, musíte namiesto toho použiť dlhý formulár.

Podpora prehľadávača

Momentálne žiadna, ale podporu môžete získať pomocou vlastnej implementácie WebKit line-clamp:

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.

Desktop

Chrome Firefox IE Hrana Safari
14 * 68 * Nie 17 5 *

Mobil / tablet

Android Chrome Android Firefox Android iOS Safari
88 * 85 * 2,3 * 5,0-5,1 *