CSS: truncate

.instui-truncate — Egy soros ellipszis csonkítás, vagy több soros lezárás --lines segítségével.

A -lines lezárás átváltás display: -webkit-box és olvassa a --lines egyéni tulajdonságot, így a szöveg annyi sorra csavarodik, mielőtt ellipszissel végződne.

Forrás: truncate.css

Használat

@import "@pantoken/components/components.css";
@import "@pantoken/components/truncate.css";

Példák

<div class="instui-truncate">This single line keeps going past the edge of its box, so it ends in an ellipsis.</div>

This single line keeps going past the edge of its box, so it ends in an ellipsis.

Módosítók

Módosító	Leírás
.-lines	Több soros lezárás; állítsa be a sorok számát a --lines egyéni tulajdonság segítségével (alapértelmezett 2).

Felhasznált tokenek

Token	Típus	Érték
--instui-component-truncate-text-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-truncate-text-line-height	<percentage>	150%
--lines	—	—

Böngészőtámogatás

• A -lines lezárás a -webkit-line-clamp függvényt display: -webkit-box fájllal használja, párosítva a szabványos line-clamp fájllal.

Kapcsolódó

• text — Szövegtípus, amelyet ez csonkít.