line-clampĪpašuma nocērt tekstu konkrētā vairākām līnijām.
Pašlaik tā specifikācija ir redaktora melnraksts, tāpēc tas nozīmē, ka šeit nekas nav akmenī iecirsts, jo tas ir nepabeigts darbs. Tas nozīmē, ka tas ir definēts kā stenogrāfija max-linesun block-overflow, no kuriem pirmais tiek atzīmēts kā risks, ka kandidāta ieteikumā to varētu izmest.
Ir viegli saprast, kā max-linestas tiktu sajaukts, jo tā funkcija (rindu skaita iestatīšana pirms saīsināšanas) jau ir iespiesta, line-clampun turpmāka abstrakcija var nebūt vajadzīga. Bet tas mūs noved no sliedēm, tāpēc ejam tālāk.
Sintakse
.module ( line-clamp: (none | ); )line-clamp pašreizējā specifikācijas projektā pieņem šādas vērtības:
none: rindu skaitam nenosaka maksimumu, un tā rezultātā netiks saīsināti.: iestata maksimālo rindu skaitu pirms satura saīsināšanas un pēc tam pēdējās rindas beigās parāda elipses signālu (…).
Šī elipse ir jāatveido kā Unicode rakstzīme (U + 2026), bet to var aizstāt ar ekvivalentu, pamatojoties uz izmantotā lietotāja aģenta satura valodu un rakstīšanas režīmu.
Hei, vai es nevaru to izdarīt ar teksta pārpildi?
Godīgs jautājums, mans draugs, un atbilde ir: labi ...
(Redzi, ko es tur darīju?)
… Sorta.
text-overflowpatiešām ir ellipsisvērtība, kas saīsina tekstu:
.truncate ( text-overflow: ellipsis; /* Needed to make it work */ overflow: hidden; white-space: nowrap; )Skatiet Geoff Graham (@geoffgraham) pildspalvas teksta pārpildi vietnē CodePen.
Jauki jauki, tas ir labs sākums. Bet ko tad, ja mēs vēlamies ieviest elipsi nevis pirmajā rindā, bet kaut kur, teiksim, trešajā teksta rindiņā?
Tur line-clampparādās spēle. Vienkārši ņemiet vērā, ka tā īstenošanai tiek izmantotas trīs īpašības:
.line-clamp ( display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; )Skatiet Geoff Graham (@geoffgraham) Pen līnijas skavu (-webkit) vietnē CodePen.
Firefox to atbalsta tieši tagad (ar -webkit-prefiksiem un visiem).
Tātad, kāds ir nozveja?
Pašlaik tas ir pārlūka atbalsts. Līnijas skavas ir daļa no CSS pārpildes moduļa 3. līmeņa, kas pašlaik ir redaktora melnrakstā un šobrīd nav pilnībā atbalstīts.
Mēs varam iegūt kādu līnijas saspiešanas darbību ar -webkit-prefiksu (kas dīvainā kārtā darbojas visās lielākajās pārlūkprogrammās). Patiesībā tas tika izdarīts iepriekš demonstrācijā.
Ja mēs vēlētos, mēs varētu iet pa JavaScript ceļu. Clamp.js veiks triku:
Skatiet Geoff Graham (@geoffgraham) Pen line-clamp (clamp.js) vietnē CodePen.
Pārlūka atbalsts
Tas ir atbalsts WebKit pareizībai un nedokumentētai līnijas skavas ieviešanai.
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 14 * | 68 * | Nē | 17 | 5 * |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 * | 85 * | 2,3 * | 5,0–5,1 * |