Blokk-overløp - CSS-triks

Anonim

Den block-overflowegenskap avkorter tekst og angir mer innhold på følgende måte ved å sette inn en ellipse eller tilpasset streng etter et antall linjer som er angitt av max-linesegenskapen.

Egenskapen er introdusert i Editor's Draft of the CSS Overflow Module Level 3 specification. Det betyr at det er eksperimentelt for øyeblikket og betraktes som et pågående arbeid. Faktisk kan du følge samtalen som inkluderer snakk om å gi nytt navn til eiendommen helt.

Syntaks

.module ( block-overflow: (clip | ellipsis | ); max-lines: (); /* required by block-overflow */ )

block-overflow aksepterer følgende verdier:

  • clip: Setter ikke inn et tegn for å indikere mer tekst å følge. I stedet blir innholdet bare avkortet og avskåret ved siste tegn.
  • ellipsis: Viser en ellipse (...) på slutten av siste linje. Den skal gjengis som et Unicode-tegn (U + 2026), men kan erstattes av en ekvivalent basert på innholdsspråket og skrivemodusen til brukeragenten som brukes.
  • : Viser tilpasset tekst (f.eks. “Les mer →”) på slutten av den siste linjen. Spesifikasjonen sier at User-Agent kan erstatte strengen med en ellipse hvis strengen er "absurd" lang.

Igjen, alt dette er eksperimentelt pågående arbeid. Disse verdiene kan endres. Eller mer kan legges til. For eksempel har det blitt etterlyst en "smartere" ellips som kan være i stand til å gjøre flere ting, som å beskjære tekst i midten:

One thing led to another and… yada yada yada, that was that.

Bruk line-clampfor kort

Vi kan få omtrent det samme ved å bruke line-clampsom er stenografi for block-overflowog max-linesegenskapene.

Som det for øyeblikket er definert, line-clampgodtar det imidlertid bare en enkelt numerisk verdi for max-linesog setter implisitt block-overflowtil ellipsisverdien. Så hvis du vil bruke en tilpasset streng for avkorting, må du gå med det lange skjemaet i stedet.

Nettleserstøtte

Ingen for øyeblikket, men du kan få støtte ved hjelp av WebKits egenutviklede implementering av line-clamp:

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.

Desktop

Chrome Firefox DVS Kant Safari
14 * 68 * Nei 17 5 *

Mobil / nettbrett

Android Chrome Android Firefox Android iOS Safari
88 * 85 * 2,3 * 5,0-5,1 *