[wordpress]ボックスに収まらないテキストを折り返す方法[CSS]

今回は、以下の画像のように、ボックスからテキストがはみ出てしまう場合の対処法を解説します。

ボックスに収まらないテキストを折り返す方法[CSS]

ボックスからテキストがはみ出してしまう場合、『word-break: break-all;』をCSSに追加しましょう！

word-break: break-all;

『word-break: break-all;』は、ボックスからテキストがはみ出す場合に、改行するように指定します。

CSS

.box-text {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.57143;
    padding: 20px;
    word-break: break-all;
}

ブラウザでの表示

このように、『word-break: break-all;』をCSSに追加するだけで、テキストがボックスに収まるようになりました！

word-breakのその他の値

word-breakの値には、以下のような値があります。

normal	元々の改行規則を使用する。
break-all	英単語文字の改行の禁則処理を解除して、どの文字の間でも改行できるようにする。
keep-all	テキストの改行をしない。
break-word	英単語の文字の途中で、ボックスからはみ出る場合、次の行に改行する。

『breakーall』と『break-word』の違い

break-all　➡️　英単語の途中の文字でも改行する。 break-word　➡️　英単語の途中でボックスからはみ出る場合、その英単語を改行する。

デモ

See the Pen zYBoLLd by ryu (@ryu-no-sss) on CodePen.

まとめ

・ボックスからテキストがはみ出る場合は、word-break: break-all;をCSSに追加する。

それでは、最後まで読んでいただきありがとうございました。