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 * |