A line-clamp
tulajdonsá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-overflow
amelyek 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-lines
lenne ö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-overflow
való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-clamp
jö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 * |