Блок-прелив - ЦСС-трикови

Anonim

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 *