CSS: truncate ​

.--truncate — Ellipsis truncation with line clamping controlled by --lines — usable bare or chained onto any component (.instui-button.--truncate).

The base class uses display: -webkit-box and reads the --lines custom property to clamp text to a fixed number of lines before it ends in an ellipsis.

Source: index.ts

TIP

JS Requirement — This component ships no CSS of its own — its markup and behavior come entirely from @pantoken/interactions. Its --max-lines-auto modifier is driven by that behavior. See the modifier table below.

Usage ​

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

Examples ​

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>

Modifiers ​

ModifierDescription
.--lines-1Alias of --max-lines-1.
.--lines-2Alias of --max-lines-2.
.--lines-3Alias of --max-lines-3.
.--lines-4Alias of --max-lines-4.
.--lines-5Alias of --max-lines-5.
.--max-lines-1Clamp to one line (default).
.--max-lines-2Clamp to two lines.
.--max-lines-3Clamp to three lines.
.--max-lines-4Clamp to four lines.
.--max-lines-5Clamp to five lines.
.--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.
.--truncateEnables truncation and line clamping on the target element.
.--truncate-character(default) Truncate at the character level.
.--truncate-wordTruncate at the word level.

Custom properties ​

PropertyTypeDefaultDescription
--ellipsisclip | ellipsis | <string> | fadeellipsis—
--lines<integer>1—

Tokens consumed ​

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

Browser support ​

  • Clamping relies on -webkit-line-clamp with display: -webkit-box, paired with the standard line-clamp.
  • text — Body typography that this truncates.