CSS 単語の改行方法を指定するサンプル(word-break)

CSSの単語の改行方法を指定するサンプルです。
word-breakプロパティを使用します。

word-break プロパティ

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

サンプル

word-breakのサンプルです。

1番上は、normalです。日本語は改行します。
2番目もnormalですが、英字は改行しません。
3番目は、break-allです。改行します。
4番目は、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>
<body >

<p id="p1">normal日本語は単語の途中でも改行します。</p>
<p id="p2">normaleigohakaigyoushimasen</p>
<p id="p3">breakall単語の途中でも改行します。</p>
<p id="p4">keepall単語の途中で改行しません</p>

関連の記事

CSS 単語が表示領域を超える場合の改行方法(overflow-wrap/word-wrap)
CSS 表示領域を超える場合の表示方法(overflow)

△上に戻る