Линия-скоба - CSS-трикове

В line-clampтекста отрязъци собственост на определен брой линии.

Спецификацията за него понастоящем е редакторски проект, така че това означава, че тук нищо не е поставено на камък, защото това е в процес на работа. Въпреки това, той се определя като стенография за max-linesи block-overflow, първият от които е отбелязан като риск от отпадане в препоръката за кандидат.

Лесно е да се види как max-linesби се смесил, тъй като функцията (задаване на броя на редовете преди отрязване) вече е изпечена line-clampи всякаква по-нататъшна абстракция може да е ненужна. Но това ни изкарва от релси, така че нека продължим напред.

Синтаксис

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

line-clamp приема следните стойности в текущия проект на спецификацията:

none: не задава максимален брой на редовете и в резултат няма да се получи съкращаване.
: задава максималния брой редове, преди да отсече съдържанието и след това показва многоточие (...) в края на последния ред.

Тази елипса трябва да се изобразява като Unicode знак (U + 2026), но може да бъде заменена с еквивалент въз основа на езика на съдържанието и режима на писане на използвания потребителски агент.

Хей, не мога ли да направя това с преливане на текст?

Честен въпрос, приятелю, а отговорът е, ами ...

(Вижте какво направих там?)

... сорта.

text-overflowнаистина има ellipsisстойност, която ще отсече текста:

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

Вижте преливането на текст на Pen от Geoff Graham (@geoffgraham) на CodePen.

Хубаво хубаво, това е добро начало. Но какво, ако искаме да представим многоточието не на първия ред, а някъде, да речем, на третия ред текст?

Тук line-clampвлиза в игра. Просто обърнете внимание, че за да се случи, се използва комбинация от три свойства:

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

Вижте скобата за линия Pen (-webkit) от Geoff Graham (@geoffgraham) на CodePen.

Firefox поддържа това сега, точно по този начин (с -webkit-префиксите и всичко).

И така, каква е уловката?

В момента това е поддръжка на браузър. Линейните скоби са част от модула CSS Overflow Level 3, който в момента е в Чернова на редактора и в момента не се поддържа.

Можем да получим някакво действие за затягане на редове с -webkit-префикс (който, странно, работи във всички основни браузъри). Всъщност така беше направено демото по-горе.

Можем да слезем по пътя на JavaScript, ако желаем. Clamp.js ще свърши работа:

Вижте скобата за линия Pen (clamp.js) от Geoff Graham (@geoffgraham) на CodePen.

Поддръжка на браузър

Това е подкрепата за коректността и недокументираното прилагане на линия стяга на WebKit.

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.