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	1行にクランプ（デフォルト）。
.--max-lines-2	2行にクランプ。
.--max-lines-3	3行にクランプ。
.--max-lines-4	4行にクランプ。
.--max-lines-5	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%

ブラウザ対応

• クランプは標準のline-clampと組み合わせた-webkit-line-clampとdisplay: -webkit-boxに依存します。

関連項目

• text — これが省略される本文のタイポグラフィ。