Ellipsis

Automatically truncates long text with single-line / multi-line clipping; on overflow it shows the full text in a tooltip on hover, and it can also expand / collapse.

Single-Line Ellipsis

Single-line ellipsis

Example

Constraining the width on the container is enough to trigger the ellipsis; when there is no overflow it renders plain text (without any overlay).

Multi-Line Ellipsis

Multi-line ellipsis (lines / rows)

Example

From rows=2 on, -webkit-line-clamp is used; on multi-line ellipsis the tooltip shows the full text. lines is equivalent to rows (a synonym alias; lines wins when both are present) — lines is the recommended name for new code.

Expand / Collapse

Expand / collapse (inline link form)

Example

With expandable, an inline "expand/collapse" link appears only when the text actually overflows — it trails the ellipsis on the same line. Once expanded, no ellipsis is applied, and the oas-expand / oas-collapse events can track the state.

Custom Expand / Collapse Labels

expand-text / collapse-text

Example

The expand-text / collapse-text attributes override the locale default "Expand / Collapse" labels.

Controlled Expansion (expanded)

Controlled expanded (attribute-driven)

Toggle from outside

Click the button or the inline link to toggle expansion.

Example

With the expanded attribute present the text is expanded (host-forced); when absent, internal state drives it. Internal toggles reflect back to the attribute, and the host can add/remove the attribute to drive it too.

Overflow State Event (oas-overflow)

oas-overflow: watch overflow changes

No event yet (no overflow initially)

Example

oas-overflow fires when the overflow state flips (detail: { overflow }), without re-firing for the same value; flips detected by the ResizeObserver re-measurement trigger it as well.

Ellipsis direction (direction)

start: ellipsize head, keep tail

For long paths / file names: the head is truncated with an ellipsis while the trailing file name stays fully visible (pure CSS via `direction: rtl` + `unicode-bidi: plaintext`).

Example

middle: keep head and tail, ellipsize the middle

For hashes / transaction IDs: both ends stay recognizable while the middle is compressed with an ellipsis; hover to see the full text.

Example

direction values: tail (default, tail ellipsis) / start (head ellipsis) / middle (middle ellipsis, keeping both ends). Multi-line (rows/lines ≥ 2) works with middle / start too: the component measures text wrapping in a same-width mirror container inside the shadow root and binary-searches the cut per line count — the first line keeps the head and the last line keeps the tail (middle), or the head is ellipsized while the tail is kept (start). Environments without measurable layout safely fall back to showing the full text.

Multi-Line Direction

middle: keep head and tail across lines

Multi-line middle: head on the first line, tail on the last line, joined by an ellipsis.

Example

start: ellipsize head across lines, keep tail

Multi-line start: the head is ellipsized while the trailing path stays fully visible.

Example

Preserved Suffix (suffix)

suffix: keep the extension when ellipsized

Example

suffix marks a tail that must survive truncation (e.g. a file extension or email domain): with the default tail direction the suffix width is reserved, producing a "body…suffix" result. middle / start already keep the tail, so suffix is not combined with them.

Click-to-Expand (expand-trigger)

expand-trigger=click: click the text to expand

Example

expand-trigger="click" (together with expandable): the ellipsized text body itself is the expand entry (no separate button). Once expanded the full text is restored; click again to collapse. The ellipsized text carries role=button / tabindex="0" with aria-expanded kept in sync, and Enter / Space trigger the same action. The default remains the button / link form.

Tooltip Placement (tooltip-placement)

tooltip-placement passthrough

placement=top (default)

placement=bottom

Example

The tooltip-placement attribute is passed through to the inner oas-tooltip (top / bottom / left / right, default top), so the full-text hover tooltip pops up at the given side.

Disabling the Tooltip

Tooltip disabled

Example

API

oas-ellipsis

Attributes

Attribute	Description	Type	Default
collapse-text	Collapse link text (inline form, with expandable)	—	—
direction	Ellipsis direction: tail (default, tail) / start (head, keep tail) / middle (keep both ends, for long paths/hashes); with multiple lines (lines/rows ≥ 2), middle/start truncate via mirror measurement	string	tail
expand-text	Expand link text (inline form, with expandable)	—	—
expand-trigger	Expand trigger form: with click the ellipsized text body expands/collapses on click (with expandable; role=button, keyboard reachable); defaults to the button/link form	—	—
expandable	Show an "expand/collapse" button when overflowing	boolean	—
expanded	Controlled expanded state (controlled when present; internal toggles reflect back)	boolean	—
lines	Number of lines to show, equivalent to rows (synonym alias; lines wins when both are present; 1 is single-line, ≥2 multi-line)	—	—
rows	Number of lines to show (1 is single-line ellipsis, ≥2 multi-line -webkit-line-clamp)	string	1
suffix	Tail suffix preserved when ellipsized (e.g. .pdf); only with the default tail direction (middle/start already keep the tail)	—	—
text	Text content	string	—
tooltip	Show a full-text tooltip on hover when overflowing	string	true
tooltip-placement	Overflow tooltip placement (default top)	string	top

Events

Event	Description
oas-collapse	Collapsed, detail: { expanded: false }
oas-expand	Expanded, detail: { expanded: true }
oas-overflow	Fired when the overflow state changes, detail: { overflow } (not re-fired for the same value)

CSS Variables

CSS Variable	Default
--oas-ellipsis-lines	2

The tooltip / expand button is only mounted when the text actually overflows; with no overflow it is plain text, and on disconnect it is destroyed — no orphaned overlays.