CSS: truncate

.--truncate — Whakatewhatewhatanga ellipsis me te whakamau rārangi ka whakahaerehia e --lines — ka taea te whakamahi ā-tūturu, ā-rārangi rānei ki runga i tētahi wāhanga (.instui-button.--truncate).

Kei te whakamahi te karaehe turanga i te display: -webkit-box ā, ka pānui i te taonga ritenga --lines kia here i te kuputu ki tētahi nama rārangi kua whakaritea i mua i te whakaoti ki te ellipsis.

Source: index.ts

TIP

Āhei JS — Kāore tēnei wahanga e tuku CSS āna ake — mai i te @pantoken/interactions katoa tona tohu me tana whanonga. Ko tana whakarerekētanga --max-lines-auto ka taraiwahia e taua whanonga. Tirohia te rārangi whakarerekētanga i raro.

Ngā Whakamahi

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

Ngā tauira

<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>

Ngā Kaitī

Kaiwhakatikatika	Whakamārama
.--lines-1	Tūāhua o --max-lines-1.
.--lines-2	Tūāhua o --max-lines-2.
.--lines-3	Tūāhua o --max-lines-3.
.--lines-4	Tūāhua o --max-lines-4.
.--lines-5	Tūāhua o --max-lines-5.
.--max-lines-1	Tauria ki te kotahi rārangi (taunoa).
.--max-lines-2	Tauria ki ngā rārangi e rua.
.--max-lines-3	Tauria ki ngā rārangi e toru.
.--max-lines-4	Tauria ki ngā rārangi e whā.
.--max-lines-5	Tauria ki ngā rārangi e rima.
.--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	Whakahohea te whakarereketanga me te whakamau rārangi ki runga i te āhuatanga ūnga.
.--truncate-character	(taunoa) Whakatewhatewhahia i te taumata pūāhua.
.--truncate-word	Whakatewhatewhahia i te taumata kupu.

Ngā taonga ritenga

Rawa	Momo	Taunoa	Whakamārama
--ellipsis	clip | ellipsis | <string> | fade	ellipsis	—
--lines	<integer>	1	—

Ngā tohu i whakamahia

Token	Momo	Uara
--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%

Tautoko pūtirotiro

• E whakawhirinaki ana te whakamau ki -webkit-line-clamp me display: -webkit-box, e ōrite ana ki te line-clamp paerewa.

Hono

• text — Te momo typography o te tinana e whakatewhatewhahia ana e tēnei.