CSSの単語の改行方法を指定するサンプルです。
word-breakプロパティを使用します。
目次
word-breakのサンプル
word-breakのサンプルです。
単語の改行方法を指定します。
<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>以下は、実行結果です。
word-breakプロパティの仕様
| word-break : 値 |
| 値 | 説明 |
|---|---|
| normal | 言語のデフォルトの改行ルールを使用します。日本語は単語の途中でも改行します。英字は改行しません。 (初期値) |
| break-all | 日本語、英字ともに単語の途中でも改行します。 |
| keep-all | 日本語、英字ともに単語の途中で改行しません。 |
| 値を継承する | |
- 単語の改行方法を指定します。
- 以下はMDNのword-breakプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/word-break
関連の記事
CSS 単語が表示領域を超える時の改行(overflow-wrap)
CSS 表示領域を超える場合の表示方法(overflow)