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 (rows)

Example

From rows="2" on, -webkit-line-clamp is used; on multi-line ellipsis the tooltip shows the full text.

Expand / Collapse

Expand / collapse

Example

With expandable, the button only appears when the text actually overflows; once expanded, no ellipsis is applied, and the oas-expand / oas-collapse events can track the state.

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; single-line only, ignored when rows ≥ 2).

Disabling the Tooltip

Tooltip disabled

Example

API

Attributes

Attribute	Description	Type	Default
direction	Ellipsis direction: end (default, tail) / start (head) / middle (keep both ends, for long paths/hashes)	string	tail
expandable	Show an "expand/collapse" button when overflowing	boolean	—
rows	Number of lines to show (1 is single-line ellipsis, ≥2 multi-line -webkit-line-clamp)	string	1
text	Text content	string	—
tooltip	Show a full-text tooltip on hover when overflowing	string	true

Events

Event	Description
oas-collapse	Collapsed, detail: { expanded: false }
oas-expand	Expanded, detail: { expanded: true }

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.