CSS - word-break

概要

属性名	word-break
値	normal \| break-all \| keep-all
初期値	normal
適用可能要素	すべての要素
継承	継承する
メディア	Visual / Text
サポート	C3 / e5

説明

単語間、文字間で表示幅に合わせた自動改行を行うか否かを指定します。

値	説明
normal	一般ルールに従って改行します。例えば、大半のブラウザでは、英文は単語の間、和文はすべての文字の間で自動改行します。
break-all	英文・和文に関わらず、すべての文字の間で自動改行されます。
keep-all	英文・和文に関わらず、単語の間(空白がある箇所)で自動改行されます。

使用例

HTML

.sample-normal {
    word-break: normal;
    margin: 1em;
    width: 200px;
    border: 1px solid #666666;
}
.sample-break-all {
    word-break: break-all;
    margin: 1em;
    width: 200px;
    border: 1px solid #666666;
}
.sample-keep-all {
    word-break: keep-all;
    margin: 1em;
    width: 200px;
    border: 1px solid #666666;
}

HTML

<h3>normal</h3>
<div class="sample-normal">
This is English sentence. This is English sentence.
これは日本語の文章です。これは日本語の文章です。
</div>

<h3>break-all</h3>
<div class="sample-break-all">
This is English sentence. This is English sentence.
これは日本語の文章です。これは日本語の文章です。
</div>

<h3>keep-all</h3>
<div class="sample-keep-all">
This is English sentence. This is English sentence.
これは日本語の文章です。これは日本語の文章です。
</div>

表示

normal

This is English sentence. This is English sentence. これは日本語の文章です。これは日本語の文章です。

break-all

This is English sentence. This is English sentence. これは日本語の文章です。これは日本語の文章です。

keep-all

This is English sentence. This is English sentence. これは日本語の文章です。これは日本語の文章です。

初版：1997年7月27日、最終更新：2012年5月4日

https://www.tohoho-web.com/css/prop/word-break.htm