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.

Disabling the Tooltip

Tooltip disabled

Example

API

Attributes

Attribute	Description	Type	Default
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.