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

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

word-break プロパティ

word-break : 値

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

単語の改行方法を指定します。
以下はMDNのword-breakプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/word-break

コード

サンプルのコードです。
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