CSS: truncate

.--truncate — Ելիպսիսի կրճատում՝ տողերի սեղմմամբ, որը վերահսկվում է --lines-ով — կարելի է օգտագործել առանձին կամ հղմել որևէ կոմպոնենթի վրա (.instui-button.--truncate).

Ենթաստանդարտ դասը օգտագործում է display: -webkit-box և կարդում է --lines հատուկ հատկությունը՝ տեքստը ֆիքսված տողերի քանակով սեղմելու համար, մինչև այն ավարտվի ելիպսիսով։

Source: index.ts

TIP

JS պահանջ — Այս կոմպոնենտը որևէ սեփական CSS չի տարել — նրա նշումը և վարքը ամբողջությամբ գալիս են @pantoken/interactions-ից։ Նրա --max-lines-auto մոդիֆիկատորը ղեկավարվում է այդ վարքով։ Տե՛ս մոդիֆիկատորների աղյուսակը ստորև։

Օգտագործում

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

Օրինակներ

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

Մոդիֆիկատորներ

Մոդիֆիկատոր	Նկարագիր
.--lines-1	--max-lines-1-ի ուղղը։
.--lines-2	--max-lines-2-ի ուղղը։
.--lines-3	--max-lines-3-ի ուղղը։
.--lines-4	--max-lines-4-ի ուղղը։
.--lines-5	--max-lines-5-ի ուղղը։
.--max-lines-1	Սեղմել մեկ տողով (ռեժիմը՝ ըստ կանխադրվածի).
.--max-lines-2	Սեղմել երկու տողով։
.--max-lines-3	Սեղմել երեք տողով։
.--max-lines-4	Սեղմել չորս տողով։
.--max-lines-5	Սեղմել հինգ տողով։
.--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	Միացնում է կրճատումը և տողերի սեղմումը թիրախային էլեմենտի վրա։
.--truncate-character	(ստանդարտ) Կրճատել ըստ նիշերի։
.--truncate-word	Կրճատել ըստ բառերի։

Անհատական հատկություններ

Առանձնահատկություն	Տիպ	Ընթացիկ	Նկարագիր
--ellipsis	clip | ellipsis | <string> | fade	ellipsis	—
--lines	<integer>	1	—

Ցուցիչներ սպառված

Token	Տիպ	Արժեք
--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%

Բրաուզերի աջակցություն

• Սեղմումը հիմնված է -webkit-line-clamp-ի վրա՝ display: -webkit-box-ով, զույգված ստանդարտ line-clamp-ի հետ։

Ավելին կապված

• text — Բովանդակության տիպոգրաֆիան, որը սա կրճատում է։