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

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

word-break プロパティ

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

コード

サンプルのコードです。
4,8,12行目でword-breakを指定しています。

<style>
#box1{
	background-color:LightCyan;
	word-break:normal;
}
#box2{
	background-color:Cornsilk;
	word-break:break-all;
}
#box3{
	background-color:LightCyan;
	word-break:keep-all;
}
#d1 div{width:150px;height:100px;border:1px solid #000;margin-bottom:15px;}
</style>
<body >
<div id="d1">
<div id="box1">ああああああああああああああああ<br/>aaaaaaaaaaaaaaaaaaa</div>
<div id="box2">ああああああああああああああああ<br/>aaaaaaaaaaaaaaaaaaa</div>
<div id="box3">ああああああああああああああああ<br/>aaaaaaaaaaaaaaaaaaa</div>
</div>
</body>

サンプル

上記コードのサンプルです。
上からnormal、break-all、keep-allを指定しています。

ああああああああああああああああ
aaaaaaaaaaaaaaaaaaa
ああああああああああああああああ
aaaaaaaaaaaaaaaaaaa
ああああああああああああああああ
aaaaaaaaaaaaaaaaaaa

関連の記事

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



△上に戻る