CSS: truncate

.instui-truncate — Single-line ellipsis truncation, or a multi-line clamp via --lines.

The -lines clamp switches to display: -webkit-box and reads the --lines custom property, so the text wraps to that many lines before it ends in an ellipsis.

Source: truncate.css

Usage

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

Examples

<div class="instui-truncate">This single line keeps going past the edge of its box, so it ends in an ellipsis.</div>

This single line keeps going past the edge of its box, so it ends in an ellipsis.

Modifiers

Modifier	Description
.-lines	Multi-line clamp; set the line count via the --lines custom property (default 2).

Tokens consumed

Token	Type	Value
--instui-component-truncate-text-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-truncate-text-line-height	<percentage>	150%
--lines	—	—

Browser support

• The -lines clamp relies on -webkit-line-clamp with display: -webkit-box, paired with the standard line-clamp.

Related

• text — Body typography that this truncates.