EC サイトの商品説明を pretty で折り返す

EC が折り返しを気にする理由

商品説明の長さは大きくばらつきます：T シャツなら15単語、メカニカルキーボードなら200単語といった具合です。すべての説明は同じ DOM テンプレートに入りますが、最終行はユーザーが「もっと読む」を押すかどうかを決める前に最後に目にする部分です。1単語だけが取り残された最終行（「人間工学的に。」など）は悪い意味で目を引きます。

セットアップ

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

line-clamp との組み合わせ

EC リスティングでは説明を3行にクランプして「もっと読む」トグルを置くことが一般的です。pretty と line-clamp を組み合わせます：

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

3行の clamp が表示窓となり、pretty が末尾を最適化するので、3行目が単語1つだけで終わることがありません。

国際化の注意点

pretty の「オーファン」概念は言語非依存（スペース区切りの単語をカウント）なので、英語、フランス語、スペイン語など、スペース区切りの言語では同様に機能します。中国語、日本語、タイ語（単語間にスペースを置かない言語）ではルールが異なります — 専用の i18n 例を参照してください。

A/B テストする価値あり

コンバージョン最適化担当者は、タイポグラフィが読了率と Add to Cart レートに与える影響を計測しています。text-wrap: pretty はリスクゼロの追加です：プログレッシブエンハンスメントで JavaScript も不要、計測すべき性能コストもありません。