CSS: truncate

.--truncate — Pemendekan elipsis dengan penguncian baris dikawal oleh --lines — boleh digunakan sendiri atau digabungkan pada mana-mana komponen (.instui-button.--truncate).

Kelas asas menggunakan display: -webkit-box dan membaca sifat tersuai --lines untuk mengehadkan teks kepada bilangan baris tetap sebelum ia berakhir dengan elipsis.

Source: index.ts

TIP

Keperluan JS — Komponen ini tidak menyertakan CSS sendiri — markup dan tingkah lakunya datang sepenuhnya dari @pantoken/interactions. Pengubah --max-lines-auto dikawal oleh tingkah laku itu. Lihat jadual pengubah di bawah.

Penggunaan

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

Contoh

<div class="--truncate">This text is clamped to one line by default and ends in an ellipsis.</div>
<div class="--truncate" style="--lines: 3">This text is clamped to three lines and ends in an ellipsis.</div>
<button class="instui-button --truncate">…</button>

Pemodifikasi

Pemodifikasi	Penerangan
.--lines-1	Alias bagi --max-lines-1.
.--lines-2	Alias bagi --max-lines-2.
.--lines-3	Alias bagi --max-lines-3.
.--lines-4	Alias bagi --max-lines-4.
.--lines-5	Alias bagi --max-lines-5.
.--max-lines-1	Hadkan kepada satu baris (lalai).
.--max-lines-2	Hadkan kepada dua baris.
.--max-lines-3	Hadkan kepada tiga baris.
.--max-lines-4	Hadkan kepada empat baris.
.--max-lines-5	Hadkan kepada lima baris.
.--max-lines-auto	Interaction — — Clamp to the number of lines that fit in the container, based on its height and the line height of the text.
.--truncate	Mengaktifkan pemendekan dan penguncian baris pada elemen sasaran.
.--truncate-character	(lalai) Pendekkan pada peringkat aksara.
.--truncate-word	Pendekkan pada peringkat perkataan.

Hartanah tersuai

Sifat	Jenis	Lalai	Penerangan
--ellipsis	clip | ellipsis | <string> | fade	ellipsis	—
--lines	<integer>	1	—

Token digunakan

Token	Jenis	Nilai
--instui-component-truncate-text-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-line-height-paragraph-base	<percentage>	150%

Sokongan pelayar

• Penguncian bergantung pada -webkit-line-clamp dengan display: -webkit-box, dipadankan dengan line-clamp standard.

Berkaitan

• text — Tipografi badan yang dipendekkan ini.