Lohkon ylivuoto - CSS-temppuja

block-overflowOmaisuus truncates tekstiä ja osoittaa enemmän sisältöä seuraavasti lisäämällä ellipsin tai mukautettu merkkijono jälkeen useita linjoja, joka on asetettu, että max-linesomaisuus.

Ominaisuus on esitelty CSS-ylivuotomoduulin tason 3 eritelmän muokkausluonnoksessa. Se tarkoittaa, että se on tällä hetkellä kokeellinen ja sitä pidetään keskeneräisenä työnä. Itse asiassa voit seurata keskustelua, joka sisältää keskustelua kiinteistön uudelleennimeämisestä.

Syntaksi

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

block-overflow hyväksyy seuraavat arvot:

• clip: Ei lisää merkkiä osoittaaksesi lisää seurattavaa tekstiä. Sen sijaan sisältö vain katkaistaan ​​ja katkaistaan ​​viimeisen merkin kohdalla.
• ellipsis: Näyttää ellipsin (…) viimeisen rivin lopussa. Sen tulisi olla Unicode-merkki (U + 2026), mutta se voidaan korvata vastaavalla käytetyn User-Agentin sisältökielen ja kirjoitustilan perusteella.
• : Näyttää mukautetun tekstin (esim. “Lue lisää →”) viimeisen rivin lopussa. Spesifikaation mukaan User-Agent voi korvata merkkijonon ellipsillä, jos merkkijono on ”järjetön” pitkä.

Jälleen tämä kaikki on kokeellista, keskeneräistä työtä. Nämä arvot voivat muuttua. Tai voidaan lisätä. Esimerkiksi on pyydetty älykkäämpiä ellipsejä, jotka saattavat pystyä tekemään enemmän asioita, kuten rajaamaan tekstiä keskelle:

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

Käytä line-clamplyhyesti

Voimme saada melkein saman asian, line-clampjoka on lyhenne sanoille block-overflowja max-linesominaisuuksille.

Koska se on tällä hetkellä määritelty, kuitenkin line-clamphyväksyy vain yhden numeerisen arvon max-linesja epäsuorasti asettaa block-overflowsen ellipsisarvoon. Joten, jos haluat käyttää mukautettua merkkijonoa katkaisuun, sinun täytyy mennä sen sijaan pitkän muodon kanssa.

Selaimen tuki

Ei tällä hetkellä, mutta voit saada tukea käyttämällä WebKitin omaa toteutustapaa line-clamp:

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.

Työpöytä

Kromi	Firefox	IE	Reuna	Safari
14 *	68 *	Ei	17	5 *

Matkapuhelin / tabletti

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