【HTML】【CSS】折り返しのタイミングを英単語の様に制御する

　時折、ある程度は折り返してもよいが、折り返しのタイミングはてにおはや句点、読点にして欲しい、といった要望があります。そういった際には次の様に句単位で span をつけ、各 span に white-space:nowrap をかける方法が有効です。

<div class="wrap">
  <span>折り返しのタイミングを</span><span>制御する</span>
</div>

.wrap span {
  white-space: nowrap;
}

　これのデモが次です。

See the Pen
Date FNS Demo by cpt-sugiura (@cpt-sugiura)
on CodePen.

　white-space:nowrapの常として、幅によってははみ出してしまいますが、そのあたりはデザインや実行環境と応相談です。