Rebar UI

1.0

opinion

Ellipsis

Cuts text to a number of lines, with optional More and Less.

Interview noteTwo lines, then More
Interview 11: most of the crew keep a paper copy of the rota in the cab because the app is slow to open on the quay. They want shifts they can read at a glance, offline, with the next handover time shown first.
One line, cut in the middle
interview-03-walkthrough-harbour-office-second-take-final.mp4
Cut at the start
interview-03-walkthrough-harbour-office-second-take-final.mp4
Short text, nothing to cut
Twelve calls, one clear pattern.
Opens expanded
Interview 11: most of the crew keep a paper copy of the rota in the cab because the app is slow to open on the quay. They want shifts they can read at a glance, offline, with the next handover time shown first.

In context

Activity feedLong updates stay one row tall until opened
Latest notes
PN

Priya Nair

Interview 11: most of the crew keep a paper copy of the rota in the cab because the app is slow to open on the quay. They want shifts they can read at a glance, offline, with the next handover time shown first.

JW

Jonas Weber

Offline sync now queues edits while the phone has no signal and replays them in order when it reconnects. Conflicts keep the newest edit and flag the older one for a look.

MC

Maya Chen

Palette signed off.

Props

PropTypeRequiredDefault
contentstringYes—
rowsnumber | undefinedNo1
directionEllipsisDirection | undefinedNoend
expandTextReactNodeNo
collapseTextReactNodeNo
openboolean | undefinedNo—
defaultOpenboolean | undefinedNofalse
onOpenChange((open: boolean) => void) | undefinedNo—
onContentClick((event: MouseEvent<HTMLSpanElement, MouseEvent>) => void) | undefinedNo—
classNamestring | undefinedNo—

data-rebar-* attributes

data-rebar-component="ellipsis"; data-rebar-part="content"|"expand"|"collapse".

Migrating to Ant Design

Ant Design (web) has no direct equivalent — Typography.Text's own ellipsis prop only truncates, with no expand/collapse and no middle/start direction. This ports antd-*mobile*'s Ellipsis instead, the closest real match.