text-wrap: nowrap for Button Labels

The Button Wrapping Problem

A button labeled "Add to Cart" should never wrap to two lines, even on a 320px mobile screen. But default CSS will wrap it the moment the container narrows. Worse, in a multi-button row, one button wrapping while siblings stay single-line breaks vertical alignment.

The Modern Fix

.btn {
  text-wrap: nowrap;
  /* equivalent older syntax: */
  /* white-space: nowrap; */
}

text-wrap: nowrap is identical in effect to white-space: nowrap for line-breaking purposes, but it's part of the unified text-wrap property family, which makes intent clearer when you're already setting other text-wrap values nearby in your stylesheet.

When the button overflows

If the label is genuinely too long for the container, nowrap will cause it to overflow horizontally. Combine with overflow and text-overflow for a graceful degradation:

.btn {
  text-wrap: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

This produces "Subscribe to news…" instead of breaking the layout. The trade-off is that users can't see the full label, so reserve this for non-critical buttons (avoid on primary CTAs).

Multi-language UIs

German labels are notoriously long ("Geschäftsbedingungen" for "Terms & Conditions"). For internationalized UIs, consider:

• Allowing wrapping (default) but setting a sensible min-width on the button so it never collapses to a tiny size
• Using shorter alternatives in your translation files
• Reserving nowrap for icon-buttons and short universal labels like "OK" / "Cancel"

Accessibility

Whichever approach you choose, never let text-overflow: ellipsis truncate critical action labels — the full text must remain visible to screen readers (it does, via the underlying DOM text), but visually-impaired sighted users with low vision will lose context.