【CSS】改行させる？改行させない？プロパティ３つ 「white-space」「word-break」 「overflow-wrap」

それぞれを比較

改行したくない時

HTML

  <div class="para">
    <p>  花見に行くのを楽しみにしていたのに、雨で台なしになった。</p>
    <p>  We had been looking forward to going (out) to see [enjoy] the cherry blossoms, but our plans were spoiled by the rain.</p>
  </div>

white-space: nowrap;

はみ出した部分の処理

orverflow: hidden;

はみ出した部分は見えなくなります。

orverflow: hidden;とtext-overflow: ellipsis;

はみ出した部分は「・・・」で省略されます。

CSS

  .para p{
    overflow: hidden; 
    white-space: nowrap;
    text-overflow: ellipsis;
  }

参考

【CSS】text-overflow: ellipsis; 要素からはみ出した文字を省略（・・・）する

改行する

とにかく改行する

word-break: break-all

長い英単語の途中でも改行されます。

句読点で改行する（日本語）

word-break: keep-all

「禁則処理」が守られるため、句読点が文頭に来ることはありません。

しかし、句読点がないと改行されず、はみ出してしまいます。