CSS: truncate ​

.--truncate — Satır sınırlamasıyla kontrol edilen üç nokta kesmesi (--lines) — tek başına kullanılabilir veya herhangi bir bileşene zincirlenebilir (.instui-button.--truncate).

Temel sınıf display: -webkit-box kullanır ve metni üç noktayla bitirmeden önce sabit sayıda satıra sıkıştırmak için --lines özel özelliğini okur.

Source: index.ts

TIP

JS Gereksinimi — Bu bileşen kendi CSS'ini göndermiyor — işaretlemesi ve davranışı tamamen @pantoken/interactions'tan gelir. --max-lines-auto değiştiricisi bu davranış tarafından yönlendirilir. Bakınız aşağıdaki değiştirici tablosu.

Kullanım ​

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

Örnekler ​

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

Değiştiriciler ​

DeğiştiriciAçıklama
.--lines-1--max-lines-1 takma adı.
.--lines-2--max-lines-2 takma adı.
.--lines-3--max-lines-3 takma adı.
.--lines-4--max-lines-4 takma adı.
.--lines-5--max-lines-5 takma adı.
.--max-lines-1Tek satıra sıkıştır (varsayılan).
.--max-lines-2İki satıra sıkıştır.
.--max-lines-3Üç satıra sıkıştır.
.--max-lines-4Dört satıra sıkıştır.
.--max-lines-5Beş satıra sıkıştır.
.--max-lines-autoInteraction — — Clamp to the number of lines that fit in the container, based on its height and the line height of the text.
.--truncateHedef öğede kesmeyi ve satır sınırlamasını etkinleştirir.
.--truncate-character(varsayılan) Karakter düzeyinde kırpar.
.--truncate-wordKelime düzeyinde kırpar.

Özel özellikler ​

ÖzellikTürVarsayılanAçıklama
--ellipsisclip | ellipsis | <string> | fadeellipsis—
--lines<integer>1—

Tüketilen tokenler ​

TokenTürDeğer
--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%

Tarayıcı desteği ​

  • Sıkıştırma, standart line-clamp ile eşleştirilmiş display: -webkit-box ile birlikte -webkit-line-clamp'a dayanır.

İlgili ​

  • text — Buna göre bu, gövde tipografisini kırpar.