Plan for long and empty text

Plan every text container for long names, blanks and zero rows.

From web-design-guidelines (Web Interface Guidelines).

One row, three lengths

Drag the length or pick a preset.

UnhandledBad
$4,120.00
Northwind $880.00
0pxwhite-space: nowrap
HandledGood
$4,120.00
Northwind $880.00
min-w-0 flex-1 truncate

truncate needs min-w-0

Narrow the card, then add min-w-0 on the left.

Without min-w-0Bad
0px.meta { flex: 1 }
With min-w-0Good
Shared link
.meta { flex: 1; min-width: 0 }
<div class="flex items-center gap-2.5">
  <LinkIcon className="shrink-0" />
  <div className="min-w-0 flex-1">
    <p>Shared link</p>
    <p className="truncate" title={url}>{url}</p>
  </div>
  <Button className="shrink-0">Copy</Button>
</div>

Zero rows, blank fields

Drag invoices to 0, or clear the first name.

Renders anythingBad
InvoiceCustomerAmount
Total
{invoices.map(row)}
Empty stateGood
InvoiceCustomerAmount
invoices.length === 0 ? <Empty /> : …
if (invoices.length === 0) return <EmptyState title="No invoices yet" />;
<td>{name.trim() || <span className="text-muted-foreground">No customer</span>}</td>

Why it matters, pros and cons

Why it matters

A flex item won't shrink below its content; one long name shoves the rest out.

Pros

  • Actions and amounts stay on screen.
  • Empty lists offer the next step.
  • Blank strings read as data, not bugs.

Cons

  • Truncation hides text; title fails on touch.
  • Never truncate IDs, amounts or dates.
  • Every empty state needs copy and an action.