CSS word-break 単語の改行方法を指定

word-breakプロパティ

word-break : 値

word-breakプロパティは、単語の改行方法を指定します。

説明
normal 言語のデフォルトの改行ルールを使用します。
日本語は単語の途中でも改行します。
英字は改行しません(初期値)。要注意です。
break-all 日本語、英字ともに単語の途中でも改行します。
よく使用します。
keep-all 日本語、英字ともに単語の途中で改行しません。
値を継承する

単語の改行方法を指定するサンプルです。

<style>
#p1{word-break:normal;} /* 日本語は単語の途中でも改行 */
#p2{word-break:normal;} /* 英字は改行しません */
#p3{word-break:break-all;} /* 日本語、英字ともに単語の途中でも改行 */
#p4{word-break:keep-all;} /* 日本語、英字ともに単語の途中で改行しません */
p{border:1px solid #000;width:150px;height:50px;
margin-bottom:10px;text-indent:10px;background:LightCyan;}
</style>
<p id="p1">normal日本語は単語の途中でも改行します。</p>
<p id="p2">normaleigohakaigyoushimasen</p>
<p id="p3">breakall単語の途中でも改行します。</p>
<p id="p4">keepall単語の途中で改行しません</p>

1行目は、日本語にnormalを指定しています。単語の途中で改行します。
2行目は、英字にnormalを指定しています。単語の途中でも改行しません。
3行目は、break-allを指定しています。改行します。
4行目は、keep-allを指定しています。改行しません。

以下は、実行結果です。

関連の記事

CSS overflow-wrap 単語が表示域を超える時の改行
CSS overflow はみ出た部分を表示する/しない

△上に戻る