block-overflow
Имовина умањује текст и показује више садржаја прати убацивањем три тачке или прилагођени стринг након одређеног броја линија које се поставља на max-lines
имовину.
Својство је уведено у уредников нацрт спецификације ЦСС модула за преливање нивоа 3. То значи да је тренутно експериментално и да се сматра радом који је у току. У ствари, можете пратити разговор који укључује брбљање о преименовању имовине у потпуности.
Синтакса
.module ( block-overflow: (clip | ellipsis | ); max-lines: (); /* required by block-overflow */ )
block-overflow
прихвата следеће вредности:
clip
: Не убацује знак да означи још текста који треба следити. Уместо тога, садржај је само скраћен и одсечен код последњег знака.ellipsis
: Приказује елипсу (...) на крају последњег реда. Требало би да се приказује као Уницоде знак (У + 2026), али би могао да буде замењен еквивалентом на основу језика садржаја и режима писања Усер-Агента који се користи.: Приказује прилагођени текст (нпр. „Прочитај више →“) на крају последњег реда. Спецификација каже да Усер-Агент може заменити низ елипсом ако је низ „апсурдно“ дугачак.
Опет, све ово је експериментални рад у току. Ове вредности би се могле променити. Или, могло би се додати још. На пример, било је позива на „паметнију“ елипсу која би могла учинити више ствари, попут обрезивања текста у средини:
One thing led to another and… yada yada yada, that was that.
Користите line-clamp
кратко
Можемо добити приближно исту ствар користећи line-clamp
скраћеницу за block-overflow
и max-lines
својства.
Као што је тренутно дефинисана, међутим, line-clamp
прихвата само једну нумеричку вредност за max-lines
и имплицитно поставља block-overflow
на ellipsis
вредност. Дакле, ако желите да користите прилагођени низ за скраћивање, онда морате да користите дугачки образац.
Подршка прегледача
Тренутно ниједан, али можете добити одређену подршку користећи власничку имплементацију ВебКит-а line-clamp
:
Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.
Десктоп
Хром | Фирефок | ИЕ | Ивица | Сафари |
---|---|---|---|---|
14 * | 68 * | Не | 17 | 5 * |
Мобиле / Таблет
Андроид Цхроме | Андроид Фирефок | Андроид | иОС Сафари |
---|---|---|---|
88 * | 85 * | 2,3 * | 5,0-5,1 * |