01
Put the ellipsis anywhere.
From the start to the end, or anywhere between: a number from 0 to 1, or 'middle'.
02
Any number of lines and ellipses.
Clamp to a few lines and still cut in the middle of one, cut in several places at once, or draw the marks yourself.
03
Suffixes are never cut.
A button, a badge or a time follows the text on its last line, and the text gives way around it. This button only shows when there's more to read.
04
Cut between words or path segments.
Cuts can fall between any two glyphs, or only where you say: at word boundaries, or at the separators of a path.
05
Tooltips only where text is cut.
floating-ellipsis/tooltip knows which rows are truncated. Hover or focus one that is: its tooltip grows out of the
line, every glyph moving to make room for what was hidden.
06
Pin the parts that matter.
Keep a file's extension, a search hit or a timestamp in sight. A kept part in the middle of a cut splits it in two.
07
Find in page finds it.
None of these rows shows the word lantern
. Press Ctrl F (⌘ F) and
search for it: each match comes into sight, between two ellipses.
08
Customize: cut what’s shared.
Siblings cut in the middle all look alike. Keep the segments no sibling has in their place, and cut the rest.
09
Customize: a lens.
Move the pointer across the quote: the part under it is kept, and the cut follows.
— Ada Lovelace, 1843
10
Sized by content.
A chip or a flex item takes its width from its text, so once cut it stays narrow. With autoSize() it takes the
width its full text would, and grows back when there is room. Narrow the box, then widen it again. And with
lines: 'fit', text shows as many lines as its box is tall: drag the card's corner.
11
Icons, emoji and every script.
Images, icons and elements marked data-elide-unit show whole or not at all. Emoji, skin tones and the letters of
any script are never split, wherever the cut falls.