Combine text-wrap with -webkit-line-clamp

The Combination

A common UI pattern: card titles or descriptions clamped to N lines with an ellipsis. The natural question: does text-wrap: balance or pretty still apply if the text is later clamped?

Yes. Both properties run during line layout, before -webkit-line-clamp truncates the visual output.

Example: Balanced title with 2-line clamp

.card-title {
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.3;
}

The browser:

1. Computes the natural line breaks
2. Applies balance, redistributing words across all lines
3. Truncates the visual output to 2 lines, adding an ellipsis on line 2

If the balanced wrapping produces 3 lines, you'll see lines 1 and 2 with an ellipsis at the end of line 2. The "balanced" portion is whatever fit into 2 lines.

Pretty + line-clamp for descriptions

For longer descriptions clamped to 3-4 lines:

.product-description {
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Pretty optimizes the last line that would naturally appear before clamping kicks in. The visible 3rd line therefore avoids ending in a single-word orphan.

A subtle quirk

If your text is exactly the right length to fit in N lines without balance, applying balance might cause it to wrap to N+1 lines (because balance prefers more, equal-length lines over fewer, unequal-length ones). The clamped result then loses content. Watch for this in QA.

Modern alternative: line-clamp without -webkit-

Modern Chromium and Safari support the unprefixed standard:

.card-title {
  text-wrap: balance;
  line-clamp: 2;
  overflow: hidden;
}

Firefox is implementing it but not yet shipped (early 2026). Use both forms for now:

.card-title {
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}