Truncate labels, not content

Cut labels that point elsewhere; never errors, totals or body text.

From refactoring-ui, “Text Wrapping & Truncation”.

A column you can resize

Drag the Vendor grip, then tap a cut cell.

Cut, no way backBad
Expenses, truncated without reveal
VendorMemoAmount
.truncate0/12
Cut, revealed on hoverGood
Expenses, truncated with a tooltip on hover or focus
VendorMemoAmount
.truncate + tooltip

An error message

Press Pay, then lengthen the message.

One line, ellipsisBad

Press Pay

text-overflow: ellipsis
Wraps, in fullGood

Press Pay

overflow-wrap: anywhere

Card titles as cards narrow

Drag a card’s right edge or the slider.

Everything on one lineBad
Report

Updated 2 days ago · 14 pages

Contracts signed before July recognize monthly. Setup fees recognize when the workspace goes live, not at signing.

.truncate
Title clampedGood
Report

Updated 2 days ago · 14 pages

Contracts signed before July recognize monthly. Setup fees recognize when the workspace goes live, not at signing.

.line-clamp-2

Why it matters, pros and cons

Why it matters

An ellipsis trades completeness for alignment. Fair for a label, not for the thing people came to read.

Pros

  • Rows and cards keep one height.
  • Resizing a column never reflows the page.
  • Full text stays in the DOM.

Cons

  • Touch has no hover; give cut text a tap path.
  • File names need middle truncation, not end.
  • If the column can grow, show the text.