目次 | word-breakとは |
normalで日本語の場合、単語の途中でも改行する | |
normalで英字の場合、単語の途中でも改行しない | |
単語の途中でも改行する (break-all) | |
単語の途中で改行しない (keep-all) |
word-breakとは
word-breakは、単語の改行方法を操作します。
書き方 | word-break : 値 |
値 | normal 言語のデフォルトの改行ルールになります。 英字は改行しません。 日本語は単語の途中でも改行します。 |
break-all 日本語、英字ともに単語の途中でも改行します。 画面レイアウトを崩さないためによく使用します。 |
|
keep-all 日本語、英字ともに単語の途中で改行しません。 |
|
初期値 | normal |
継承 | 継承する |
参考(MDN) | https://developer.mozilla.org/ja/docs/Web/CSS/word-break |
normalで日本語の場合、単語の途中でも改行する
<style>
.p1 {
border: 1px solid #000;
width: 150px;
height: 50px;
background: LightCyan;
word-break: normal;
}
</style>
<p class="p1">normal日本語は単語の途中でも改行します</p>
値がnormalで日本語の場合、単語の途中で改行します。
normalで英字の場合、単語の途中でも改行しない
<style>
.p1 {
border: 1px solid #000;
width: 150px;
height: 50px;
background: LightCyan;
word-break: normal;
}
</style>
<p class="p1">normaleigohakaigyoushimasen</p>
値がnormalで英字の場合、単語の途中で改行しません。
単語の途中でも改行する (break-all)
<style>
.p1 {
border: 1px solid #000;
width: 150px;
height: 50px;
background: LightCyan;
word-break: break-all;
}
</style>
<p class="p1">breakall単語の途中でも改行します</p>
break-allは、改行します。
単語の途中で改行しない (keep-all)
<style>
.p1 {
border: 1px solid #000;
width: 150px;
height: 50px;
background: LightCyan;
word-break: keep-all;
}
</style>
<p class="p1">keepall単語の途中で改行しません</p>
keep-allは、改行しません。
関連の記事
CSS overflow-wrap 単語が表示領域を超えた時の改行
CSS overflow はみ出し部分を表示する/しない