CSS3: word-break プロパティ - 行の改行方法

■ 概要

項  目説  明
記述形式 セレクタ {word-break: }
値 の形式 normalkeep-allbreak-all
初 期 値 normal
対応ブラウザー C3+ / e5+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+
適用可能な要素 すべての要素
継  承 する

■ 解説

word-breakプロパティ は,行の改行方法を指定します。

指定できる値の形式は,以下のとおりです。

説  明
normal 通常の規則に従って改行します。 (初期値)
keep-all 通常の改行に加えて,line-breakプロパティ で禁止されていない限り,任意の2文字の間で改行します。ただし,ハイフンの追加はしません。
break-all 通常は改行される文字と文字の間も改行されません。 この指定では,CJK の文字列は改行されません。

■ 使用例( word-break プロパティの利用)

HTMLソース
CSS
<head> ~ </head>
<style type="text/css">
<!-- 
   div.wb1 { word-break: normal; width: 5em;}
   div.wb2 { word-break: break-all; width: 5em; }
   div.wb3 { word-break: keep-all; width: 5em; }
-->
</style>
HTML
<body> ~ </body>
<div class="wb1">
   日本語の文字列, and some Latin, و کمی نوشتنن عربی, และตัวอย่างการเขียนภาษาไทย.
</div>
<div class="wb2">
   日本語の文字列, and some Latin, و کمی نوشتنن عربی, และตัวอย่างการเขียนภาษาไทย.
</div>
<div class="wb3">
   日本語の文字列, and some Latin, و کمی نوشتنن عربی, และตัวอย่างการเขียนภาษาไทย.
</div>

ブラウザー 表示例
日本語の文字列, and some Latin, و کمی نوشتنن عربی, และตัวอย่างการเขียนภาษาไทย.
日本語の文字列, and some Latin, و کمی نوشتنن عربی, และตัวอย่างการเขียนภาษาไทย.
日本語の文字列, and some Latin, و کمی نوشتنن عربی, และตัวอย่างการเขียนภาษาไทย.

■ 備考

【参考ページ】