Blokk-túlcsordulás - CSS-trükkök

Anonim

A block-overflowtulajdonság megcsonkítja a szöveget, és további tartalmat jelez, ha ellipszist vagy egyéni karakterláncot illeszt be a max-linestulajdonság által beállított sorok után .

A tulajdonság bevezetésre került a CSS túlcsordulási modul 3. szintű specifikációjának szerkesztői tervezetében. Ez azt jelenti, hogy jelenleg kísérleti jellegű, és folyamatban lévő munkának tekinthető. Valójában követheti a beszélgetést, amely magában foglalja az ingatlan teljes átnevezéséről szóló csevegést.

Szintaxis

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

block-overflow a következő értékeket fogadja el:

  • clip: Nem illeszt be karaktert, hogy további követendő szöveget jelezzen. Ehelyett a tartalom csupán csonka és az utolsó karakternél levágódik.
  • ellipsis: Ellipszist (…) jelenít meg az utolsó sor végén. Unicode karakterként kell megjelenítenie (U + 2026), de helyettesíthető egy ekvivalenssel a használt User-Agent tartalmi nyelve és írási módja alapján.
  • : Egyéni szöveget jelenít meg (pl. „További információ →”) az utolsó sor végén. A specifikáció szerint a User-Agent helyettesítheti a karakterláncot ellipszissel, ha a karakterlánc „abszurd módon” hosszú.

Ismét mindez kísérleti, folyamatban lévő munka. Ezek az értékek változhatnak. Vagy további lehetne. Például felhívtak egy „okosabb” ellipszist, amely több dolog elvégzésére is alkalmas lehet, például a szöveg középen levágására:

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

Használja line-clampa rövid

Körülbelül ugyanazt kaphatjuk meg, line-clampha a block-overflowés a max-linestulajdonságokat rövidítjük .

A jelenleg definiáltak szerint azonban line-clampcsak egyetlen numerikus értéket fogad el max-linesés implicit módon állítja block-overflowbe az ellipsisértéket. Tehát, ha egyedi karakterláncot szeretne használni a csonkoláshoz, akkor inkább a hosszú űrlappal kell menned.

Böngésző támogatás

Jelenleg nincs, de támogatást kaphat a WebKit saját fejlesztésű megvalósításával line-clamp:

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.

Asztal

Króm Firefox AZAZ Él Szafari
14 * 68 * Nem 17. 5 *

Mobil / Tablet

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