Pretty-Wrap E-commerce Product Descriptions

Why E-commerce Cares About Wrapping

Product description blocks vary wildly in length: a tee shirt might have 15 words, a mechanical keyboard 200. Every description ends up in the same DOM template, but the trailing line is what users last see before deciding whether to read more. A description ending in a single dangling word ("ergonomically.") draws the eye for the wrong reason.

Setup

.product-description {
  text-wrap: pretty;
  hyphens: auto;
  font-size: 0.9375rem;
  line-height: 1.55;
  max-width: 65ch;
}

The line-clamp combination

E-commerce listings often clamp descriptions to 3 lines with a "Read more" toggle. Combine pretty with line-clamp:

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

The 3-line clamp is the visible window; pretty optimizes the trailing edge so the third line never ends in a hanging single word.

Internationalization caveat

Pretty's notion of "orphan" is language-agnostic (it counts words separated by spaces), so it works equally well for English, French, Spanish, and other space-separated languages. For Chinese, Japanese, and Thai (which don't use spaces between words), the rules are different — see the dedicated i18n example.

A/B test it

Conversion optimizers measure the impact of typography on read-through and add-to-cart rates. text-wrap: pretty is a zero-risk addition: progressive enhancement, no JavaScript, no performance cost worth measuring.