block-overflowNemovitost zkrátí text a naznačuje další obsah následuje vložením tečky nebo vlastní řetězec po několika řádků, které je stanovené max-linesmajetku.
Tato vlastnost byla zavedena ve Zprávě editora specifikace CSS Overflow Module úrovně 3. To znamená, že je to v tuto chvíli experimentální a považováno za rozpracované. Ve skutečnosti můžete sledovat konverzaci, která zahrnuje chatování o úplném přejmenování vlastnosti.
Syntax
.module ( block-overflow: (clip | ellipsis | ); max-lines: (); /* required by block-overflow */ )block-overflow přijímá následující hodnoty:
clip: Nezadá znak, který by označoval další text, který bude následovat. Místo toho je obsah pouze zkrácen a oříznut u posledního znaku.ellipsis: Na konci posledního řádku zobrazí elipsu (…). Mělo by se vykreslit jako znak Unicode (U + 2026), ale mohl by být nahrazen ekvivalentem na základě použitého jazyka obsahu a režimu psaní User-Agent.: Zobrazí vlastní text (např. „Číst více →“) na konci posledního řádku. Specifikace říká, že User-Agent může nahradit řetězec elipsou, pokud je řetězec „absurdně“ dlouhý.
To vše je opět experimentální, probíhající práce. Tyto hodnoty se mohou změnit. Nebo lze přidat další. Objevily se například výzvy k „chytřejší“ elipsě, která by dokázala dělat více věcí, například oříznout text uprostřed:
One thing led to another and… yada yada yada, that was that.line-clampZkrátka použijte
Můžeme získat téměř stejnou věc, pomocí line-clampkteré je zkratka pro block-overflowa max-linesvlastnosti.
Jak je aktuálně definováno, line-clamppřijímá pouze jednu číselnou hodnotu pro max-linesa implicitně se nastavuje block-overflowna ellipsishodnotu. Pokud tedy chcete použít zkrácený řetězec, musíte místo toho použít dlouhý formulář.
Podpora prohlížeče
V tuto chvíli žádná, ale můžete získat podporu pomocí vlastní implementace WebKit line-clamp:
Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.
plocha počítače
| Chrome | Firefox | TJ | Okraj | Safari |
|---|---|---|---|---|
| 14 * | 68 * | Ne | 17 | 5 * |
Mobilní / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 * | 85 * | 2,3 * | 5,0-5,1 * |