▲TOPへ戻る

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

それぞれを比較

white-space :

花見を楽しみにしていたのに、雨で台なしになった。

We had been looking forward to going (out) to see [enjoy] the cherry blossoms, but our plans were spoiled by the rain.

私たちは健康に有害な食品をそれと知らずに口にしていることが多い。

We often eat food which is bad for our health without knowing it.

「pneumonoultramicroscopicsilicovolcanoconiosis」(ニューモノウルトラミクロスコーピックシリコヴォルケーノコニオシス)は、辞書に載っている最長の英単語で、とても小さい火山塵を吸い込むことで引き起こされる肺の病気です。

word-break :

花見を楽しみにしていたのに、雨で台なしになった。

We had been looking forward to going (out) to see [enjoy] the cherry blossoms, but our plans were spoiled by the rain.

私たちは健康に有害な食品をそれと知らずに口にしていることが多い。

We often eat food which is bad for our health without knowing it.

「pneumonoultramicroscopicsilicovolcanoconiosis」(ニューモノウルトラミクロスコーピックシリコヴォルケーノコニオシス)は、辞書に載っている最長の英単語で、とても小さい火山塵を吸い込むことで引き起こされる肺の病気です。

overflow-wrap :

花見を楽しみにしていたのに、雨で台なしになった。

We had been looking forward to going (out) to see [enjoy] the cherry blossoms, but our plans were spoiled by the rain.

私たちは健康に有害な食品をそれと知らずに口にしていることが多い。

We often eat food which is bad for our health without knowing it.

「pneumonoultramicroscopicsilicovolcanoconiosis」(ニューモノウルトラミクロスコーピックシリコヴォルケーノコニオシス)は、辞書に載っている最長の英単語で、とても小さい火山塵を吸い込むことで引き起こされる肺の病気です。

改行したくない時

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;

花見に行くのを楽しみにしていたのに、雨で台なしになった。

We had been looking forward to going (out) to see [enjoy] the cherry blossoms, but our plans were spoiled by the rain.

はみ出した部分の処理

orverflow: hidden;

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

花見に行くのを楽しみにしていたのに、雨で台なしになった。

We had been looking forward to going (out) to see [enjoy] the cherry blossoms, but our plans were spoiled by the rain.

orverflow: hidden;とtext-overflow: ellipsis;

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

花見に行くのを楽しみにしていたのに、雨で台なしになった。

We had been looking forward to going (out) to see [enjoy] the cherry blossoms, but our plans were spoiled by the rain.

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

参考

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

改行する

とにかく改行する

word-break: break-all

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

wordBreakBreakAll

句読点で改行する(日本語)

word-break: keep-all

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

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

wordBreakKeepAll
point

改行に関するプロパティは3つ
white-space
word-break
overflow-wrap

改行させたくない時は
「white-space: nowrap;」

改行させて、要素内に収める
「word-break: break-all;」

こんな記事も読まれています。

profile

gaoさん

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。<