Skip to content

Ellipsis

Ellipsis cuts text to one line, or to lineClamp lines, with an ellipsis. While the text is cut off a Tooltip shows all of it, and expandTrigger="click" expands it in place. Truncation is pure CSS (text-overflow and line clamping); the component measures whether the text overflows after every render and whenever it resizes, so the tooltip and the click only appear when there is something to show.

Demos

Basic

Without lineClamp the text stays on one line, as wide as its container or its max-width. Text that fits gets no tooltip.

Line clamp

lineClamp sets the number of lines.

Tooltip

tooltip takes Tooltip props: placement, or content to show something other than the text. tooltip={false} turns it off.

Click to expand

expandTrigger="click" makes truncated text a button (Enter and Space work too) that toggles the full text. Turn the tooltip off when the click already shows everything.

Controlled, with a Show more button

expanded controls the state, here from a button in after. after is never cut off: with lineClamp it sits at the end of the last visible line. A button or link in before or after is drawn as an inline text action in the theme’s link style.

Resize

Drag the box’s corner: the ellipsis and the tooltip follow the width.

Long lists

PerformantEllipsis takes the same props. It renders only the clamped text, and mounts the measuring and the Tooltip once the pointer enters a row or it takes focus, so a thousand rows don’t create a thousand resize observers and tooltips. The text element is replaced at that moment; don’t keep a ref to it.

Ellipsis Props

PerformantEllipsis takes the same props.

NameTypeDefaultDescriptionVersion
lineClampnumber | stringundefinedMaximum lines. Unset keeps the text on one line.Unreleased
tooltipboolean | EllipsisTooltipPropstrueShows the full text in a Tooltip while it is cut off. An object is passed to the Tooltip.Unreleased
expandTriggerclickundefinedclick toggles the full text by clicking the truncated text.Unreleased
expandedbooleanundefinedControlled expanded state.Unreleased
defaultExpandedbooleanfalseInitial expanded state when uncontrolled.Unreleased
onExpandedChange(expanded: boolean) => voidundefinedCalled when the text is clicked to expand or collapse.Unreleased
beforeReactNodeundefinedShown before the text, never cut off.Unreleased
afterReactNodeundefinedShown after the text, never cut off; at the end of the last line with lineClamp.Unreleased

Other props, and ref, go to the root span. Set the tooltip’s content with tooltip.content. expanded, before and after come from vue-clamp; unlike vue-clamp, the text is clamped by CSS, so after floats at the end of the last line rather than following the last visible word.