Линијска стезаљка - ЦСС-трикови

line-clampИмовину умањује текста на одређеном броју линија.

Спецификација за њега је тренутно Едитор'с Драфт (Нацрт уредника), па то значи да овде ништа није закопано јер је то у току. С тим у вези, дефинисано је као скраћеница за max-linesи block-overflow, за који је наведено да постоји ризик да ће бити одбачен у Препоруци за кандидате.

Лако је видети како max-linesби се ниширало, јер је његова функција (подешавање броја линија пре скраћивања) већ испечена line-clampи свака даља апстракција може бити непотребна. Али то нас избацује из колосека, па кренимо даље.

Синтакса

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

line-clamp прихвата следеће вредности у тренутном нацрту спецификације:

none: не поставља максимум броја линија и као резултат неће доћи до скраћивања.
: поставља максималан број редова пре скраћивања садржаја, а затим приказује елипсу (...) на крају последње линије.

Та елипса би се требала приказивати као Уницоде знак (У + 2026), али би могла бити замењена еквивалентом на основу језика садржаја и режима писања Усер-Агента који се користи.

Хеј, зар не могу ово да урадим са преливањем текста?

Поштено питање, пријатељу, а одговор је, па ...

(Видите шта сам тамо радио?)

... сорта.

text-overflowзаиста има ellipsisвредност која ће скратити текст:

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

Погледајте преливање текста оловке Геофф Грахам (@геоффграхам) на ЦодеПен-у.

Лепо лепо, то је добар почетак. Али шта ако желимо да уводимо елипсу не у први ред већ негде, рецимо, у трећи ред текста?

Ту се то line-clampигра. Само имајте на уму да се за остваривање користи комбинација три својства:

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

Погледајте Пен-лине стезаљку (-вебкит) Геофф Грахам (@геоффграхам) на ЦодеПен-у.

Фирефок то сада подржава, управо на овај начин (са -webkit-префиксима и свим осталим).

Па, у чему је квака?

Тренутно је то подршка за прегледаче. Стезаљке за линију део су ЦСС модула за преливање нивоа 3 који је тренутно у Едитор'с Драфт-у и тренутно у потпуности није подржан.

Можемо добити неку акцију стезања линија са -webkit-префиксом (која, чудно, делује у свим главним прегледачима). У ствари, тако је и направљен демо изнад.

Могли бисмо да кренемо ЈаваСцрипт стазом ако желимо. Цламп.јс ће урадити трик:

Погледајте Пен-линијску стезаљку (цламп.јс) аутора Геофф Грахам (@геоффграхам) на ЦодеПен-у.

Подршка прегледача

Ово је подршка за исправност ВебКит-а и недокументирану примену линијске стезаљке.

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.