CSS: truncate

.--truncate — gearradh le haistrithe trí chliblíne a rialaítear ag --lines — infheidhme beo nó nasctha ar aon chomhpháirt (.instui-button.--truncate).

Úsáideann an rang bunúsach display: -webkit-box agus léann sé an mhaoin shaincheaptha --lines chun téacs a chliblú go líon seasmhach línte sula dtéann sé i ndeireadh le haistrithe.

Source: index.ts

TIP

Riachtanas JS — Ní sheolann an chomhpháirt seo CSS dá chuid féin — tagann a mharcáil agus a iompar go hiomlán ó @pantoken/interactions. Tiomáineann an modhnóir --max-lines-auto an iompar sin. Féach an tábla modhnóirí thíos.

Úsáid

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

Samplaí

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

Modhnóirí

Modhnóir	Cur síos
.--lines-1	Ailias de --max-lines-1.
.--lines-2	Ailias de --max-lines-2.
.--lines-3	Ailias de --max-lines-3.
.--lines-4	Ailias de --max-lines-4.
.--lines-5	Ailias de --max-lines-5.
.--max-lines-1	Cliblaigh go líne amháin (réamhshocraithe).
.--max-lines-2	Cliblaigh go dhá líne.
.--max-lines-3	Cliblaigh go trí líne.
.--max-lines-4	Cliblaigh go ceithre líne.
.--max-lines-5	Cliblaigh go cúig líne.
.--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	Cumasóidh sé gearradh agus cliblhú línte ar an eilimint sprioc.
.--truncate-character	(réamhshocraithe) Gearr ag leibhéal an charachtair.
.--truncate-word	Gearr ag leibhéal an fhocail.

Airíonna saincheaptha

Airí	Cineál	Réamhshocraithe	Cur síos
--ellipsis	clip | ellipsis | <string> | fade	ellipsis	—
--lines	<integer>	1	—

Tóicíní a úsáideadh

Token	Cineál	Luach
--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%

Tacaíocht bhrabhsálaí

• Braitheann clibhlú ar -webkit-line-clamp le display: -webkit-box, in éineacht leis an gcaighdeán line-clamp.

Gaolmhar

• text — Cineáltaí comhlachta don choirp a ghearrtar seo.