Block-overflow - CSS-tricks

Anonim

Den block-overflowegenskapen trunkerar text och indikerar mer innehåll följer genom att sätta in en ellips eller anpassad sträng efter ett antal linjer som fastställs av max-linesfastigheten.

Egenskapen har introducerats i redaktörens utkast till specifikation för CSS-överflödesmodul nivå 3. Det betyder att det är experimentellt just nu och anses vara ett pågående arbete. I själva verket kan du följa konversationen som innehåller prat om att byta namn på fastigheten helt och hållet.

Syntax

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

block-overflow accepterar följande värden:

  • clip: Infogar inte ett tecken för att ange mer text att följa. Istället är innehållet bara trunkerat och avskuret vid det sista tecknet.
  • ellipsis: Visar en ellips (...) i slutet av den sista raden. Den ska återges som ett Unicode-tecken (U + 2026) men kan ersättas med en motsvarighet baserat på innehållsspråket och skrivläget för den användaragent som används.
  • : Visar anpassad text (t.ex. “Läs mer →”) i slutet av den sista raden. Specifikationen säger att User-Agent kan ersätta strängen med en ellips om strängen är "absurd" lång.

Återigen är allt detta experimentellt pågående arbete. Dessa värden kan förändras. Eller mer kan läggas till. Till exempel har det krävts en ”smartare” ellips som kan göra fler saker, som att beskära text i mitten:

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

Använd line-clampför kort

Vi kan få nästan samma sak med hjälp av line-clampvilket är en förkortning för block-overflowoch max-linesegenskaper.

Som det för närvarande definieras line-clampaccepterar det dock bara ett enda numeriskt värde för max-linesoch ställer implicit block-overflowtill ellipsisvärdet. Så om du vill använda en anpassad sträng för avkortning måste du istället gå med den långa formen.

Webbläsarstöd

Ingen för tillfället, men du kan få lite stöd med hjälp av WebKits egenutvecklade implementering av line-clamp:

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.

Skrivbord

Krom Firefox IE Kant Safari
14 * 68 * Nej 17 5 *

Mobil / surfplatta

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