トップページ  > CSS  > word-break

★CSSリファレンス

word-break …… テキストや単語の改行方法を指定する
Internet Explorer Google Chrome Safari Firefox Opera
広告

word-breakプロパティは、テキストや単語の改行方法を指定する際に使用します。

word-breakプロパティの実際の挙動は、テキストの言語によって異なります。 Chinese(中国語)、Japanese(日本語)、Korean(韓国語)の頭文字をとってCJKと呼びますが、 英語などの非CJKの言語とCKJ(中国語・日本語・韓国語)では、同じキーワードを指定しても改行方法の厳格さが異なるかもしれません。

初期値のnormalでは、その言語の習慣的な規則に従って適宜改行します。

テキストがオーバーフローした場合にのみ改行させたい場合には、overflow-wrapプロパティを使用してください。

■値

normal
その言語の習慣的な規則に従って適宜改行する(初期値)
keep-all
単語の途中では改行しない
break-all
文字列のどこでも(単語の途中でも)改行する
break-word
単語の区切りで改行するが、場合によっては単語の途中でも改行する

■初期値・適用対象・値の継承

初期値
normal
適用対象
すべての要素
値の継承
する

■使用例

CSSソースは外部ファイル(sample.css)に記述

p.sample {
	width:40px;
	background-color:#99cc00;
}

HTMLソース

<h5>word-break:normal; を指定</h5>
<p class="sample" style="word-break:normal;">
かえる、ぴょこぴょこ、みぴょこぴょこ。
</p>
<p class="sample" style="word-break:normal;">
Three frogs leaping together. They're three pyokopyoko.
</p>

<h5>word-break:keep-all; を指定</h5>
<p class="sample" style="word-break:keep-all;">
かえる、ぴょこぴょこ、みぴょこぴょこ。
</p>
<p class="sample" style="word-break:keep-all;">
Three frogs leaping together. They're three pyokopyoko.
</p>

<h5>word-break:break-all; を指定</h5>
<p class="sample" style="word-break:break-all;">
かえる、ぴょこぴょこ、みぴょこぴょこ。
</p>
<p class="sample" style="word-break:break-all;">
Three frogs leaping together. They're three pyokopyoko.
</p>

<h5>word-break:break-word; を指定</h5>
<p class="sample" style="word-break:break-word;">
かえる、ぴょこぴょこ、みぴょこぴょこ。
</p>
<p class="sample" style="word-break:break-word;">
Three frogs leaping together. They're three pyokopyoko.
</p>
↓↓↓

ブラウザ上の表示

word-break:normal; を指定

かえる、ぴょこぴょこ、みぴょこぴょこ。

Three frogs leaping together. They're three pyokopyoko.

word-break:keep-all; を指定

かえる、ぴょこぴょこ、みぴょこぴょこ。

Three frogs leaping together. They're three pyokopyoko.

word-break:break-all; を指定

かえる、ぴょこぴょこ、みぴょこぴょこ。

Three frogs leaping together. They're three pyokopyoko.

word-break:break-word; を指定

かえる、ぴょこぴょこ、みぴょこぴょこ。

Three frogs leaping together. They're three pyokopyoko.

広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ