浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【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の常として、幅によってははみ出してしまいますが、そのあたりはデザインや実行環境と応相談です。

  • この記事いいね! (0)