word-breakプロパティ

TOPページに戻る > CSS

word-breakプロパティ

単語の途中で改行を入れることができます。normalを指定すると英字は単語の途中では改行せずに表示できます。keep-allで句読点やスペースの位置で改行するようにできる

使い方（書式）

セレクタ { word-break: 値; }                                    

word-breakプロパティ

対応ブラウザ
適用できる要素	ブロック要素
子要素へのスタイルの継承	する

プロパティの値	説明
break-all	英語の単語の途中でも改行する
keep-all	日本語の途中でも自動改行しなくなる（IEのみ対応）。句読点やスペースの位置で改行する
normal	通常の表示。英単語の途中では自動改行しない

実際の指定方法

.hoge { word-break: break-all; }  /* 英語の単語の途中でも改行 */

.hoge2 { word-break: keep-all; }   /* 日本語の途中でも自動改行しなくなる。
                                 句読点やスペースの位置で改行 */

.hoge3 { word-break: normal; }     /* 通常の表示。英単語の途中では自動改行しない */

html部分

<div class="hogebox">
<p class="hoge">break-all break-all break-all break-all break-all break-all break-all</p>
<p class="hoge2">keep-all IEでみると日本語で改行しなくなります句読点の後に改行します、
文章がboxを突き抜けても改行されません。
半角スペースの後でも改行します 半角スペースの後に改行しました</p>
<p class="hoge3">normal normal normal normal normal 
normalnormalnormalnormalnormalnormalnormalnormalnormal</p>
</div>

実際の表示