Vonal-bilincs - CSS-trükkök

Anonim

A line-clamptulajdonság csonkolja a szöveget egy meghatározott sorban.

A specifikáció jelenleg egy szerkesztői vázlat, tehát ez azt jelenti, hogy itt semmi sincs kőbe vésve, mert folyamatban lévő munka. Ez azt jelenti, hogy rövidítésként definiálják, max-linesés block-overflowamelyek közül az előbbit úgy jelzik, hogy fennáll a veszélye annak, hogy elesik a jelöltek ajánlásában.

Könnyen belátható, hogy hogyan max-lineslenne összekeverve, mivel a funkciója (a vonalak számának beállítása a csonkolás előtt) már be van sütve, line-clampés minden további absztrakció szükségtelen lehet. De ezzel kijutunk a pályáról, úgyhogy lépjünk tovább.

Szintaxis

.module ( line-clamp: (none | ); )

line-clamp a következő értékeket fogadja el a specifikáció jelenlegi tervezetében:

  • none: nem állít be maximális értéket a sorok számára, és ennek következtében nem történik csonkolás.
  • : beállítja a sorok maximális számát a tartalom csonkolása előtt, majd egy ellipszist (…) jelenít meg az utolsó sor végén.

Ezt az ellipszist Unicode karakterként kell megjeleníteni (U + 2026), de helyettesíthető egy ekvivalenssel a használt User-Agent tartalmi nyelve és írási módja alapján.

Hé, nem tudom ezt megtenni a szöveg túlcsordulásával?

Igaz kérdés, barátom, és a válasz az, hogy…

(Látod, mit csináltam ott?)

… olyasmi .

text-overflowvalóban van olyan ellipsisértéke, amely csonkítja a szöveget:

.truncate ( text-overflow: ellipsis; /* Needed to make it work */ overflow: hidden; white-space: nowrap; )

Lásd Geoff Graham (@geoffgraham) Toll szöveges túlcsordulását a CodePen-en.

Szép szép, ez jó kezdet. De mi van akkor, ha az ellipszist nem az első, hanem mondjuk a harmadik szövegsorban akarjuk bevezetni?

Ott line-clampjön a játék. Csak vegye figyelembe, hogy a megvalósításához három tulajdonság kombinációját használják:

.line-clamp ( display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; )

Lásd: Geoff Graham (@geoffgraham) Pen line-clamp (-webkit) a CodePen-en.

A Firefox ezt most, pontosan így támogatja (az -webkit-előtagokkal és mindennel).

Szóval, mi a fogás?

Jelenleg böngészőtámogatás. A vonalbilincsek a CSS 3. túlcsordulási modul részét képezik, amely jelenleg a Szerkesztõ Piszkozatában van, és jelenleg nem támogatott.

Kaphatunk valamilyen vonalkapcsolási műveletet egy -webkit-előtaggal (ami furcsa módon minden nagyobb böngészőben működik). Valójában így készült a fenti demó.

Ha szeretnénk, elmehetnénk a JavaScript útvonalára. A Clamp.js trükközni fog:

Lásd Geoff Graham (@geoffgraham) Pen line-bilincsét (clamp.js) a CodePen-en.

Böngésző támogatás

Ez támogatja a WebKit megfelelőségét és a vonalkapcsok dokumentálatlan megvalósítását.

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 *