line-break

中国語、日本語、韓国語 (CJK) のテキストにおいて、句読点や記号を用いた場合の改行規則 (禁則処理) を設定。

auto:既定の改行規則を使用してテキストを改行します。
loose:最も制限の少ない改行規則を使用してテキストを改行します。一般的に、新聞などの短い行に使用されます。
normal:最も一般的な改行規則を使用してテキストを改行します。
strict:最も厳格な改行規則を使用してテキストを改行します。
anywhere:句読点や温存された空白、単語の途中も含め、すべての文字の間で折り返しできるようにし、 GL, WJ, ZWJ の文字クラスや、 word-break プロパティでもたらされる折り返しの禁止を一切無視します。どの折り返しの機会も優先されることはありません。ハイフネーションは適用されません。

line-break
-
word-break
-
overflow-wrap
-
word-wrap
-

気象状況七夕のく。も今日の天気、は、問題があ。ります。大・阪、の夏は暑いね。今年は旅行に行こう。今年は・、旅・。行に行こう。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

line-break
auto
word-break
-
overflow-wrap
-
word-wrap
-

気象状況七夕のく。も今日の天気、は、問題があ。ります。大・阪、の夏は暑いね。今年は旅行に行こう。今年は・、旅・。行に行こう。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

line-break
loose
word-break
-
overflow-wrap
-
word-wrap
-

気象状況七夕のく。も今日の天気、は、問題があ。ります。大・阪、の夏は暑いね。今年は旅行に行こう。今年は・、旅・。行に行こう。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

line-break
normal
word-break
-
overflow-wrap
-
word-wrap
-

気象状況七夕のく。も今日の天気、は、問題があ。ります。大・阪、の夏は暑いね。今年は旅行に行こう。今年は・、旅・。行に行こう。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

line-break
strict
word-break
-
overflow-wrap
-
word-wrap
-

気象状況七夕のく。も今日の天気、は、問題があ。ります。大・阪、の夏は暑いね。今年は旅行に行こう。今年は・、旅・。行に行こう。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

line-break
anywhere
word-break
-
overflow-wrap
-
word-wrap
-

気象状況七夕のく。も今日の天気、は、問題があ。ります。大・阪、の夏は暑いね。今年は旅行に行こう。今年は・、旅・。行に行こう。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


word-break

改行しなければテキストがコンテンツボックスからあふれる場合に、ブラウザーが改行を挿入するかどうかを指定。

normal:既定の改行規則を使用します。
break-all:CJK (中国語、台湾語、日本語、韓国語) 以外のテキストにおいて、単語中などでの文字の改行に関する禁則処理を解除し、どの文字の間でも改行するようにします。
keep-all:CJK テキストの改行を許可しません。 CJK 以外のテキストについては normal と同じ挙動となります。
break-word:overflow-wrapプロパティの値とは関係なく、 word-break: normal や overflow-wrap: anywhere と同じ効果になります。

line-break
-
word-break
-
overflow-wrap
-
word-wrap
-

気象状況七夕のく。も今日の天気、は、問題があ。ります。大・阪、の夏は暑いね。今年は旅行に行こう。今年は・、旅・。行に行こう。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

line-break
-
word-break
normal
overflow-wrap
-
word-wrap
-

気象状況七夕のく。も今日の天気、は、問題があ。ります。大・阪、の夏は暑いね。今年は旅行に行こう。今年は・、旅・。行に行こう。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

line-break
-
word-break
break-all
overflow-wrap
-
word-wrap
-

気象状況七夕のく。も今日の天気、は、問題があ。ります。大・阪、の夏は暑いね。今年は旅行に行こう。今年は・、旅・。行に行こう。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

line-break
-
word-break
keep-all
overflow-wrap
-
word-wrap
-

気象状況七夕のく。も今日の天気、は、問題があ。ります。大・阪、の夏は暑いね。今年は旅行に行こう。今年は・、旅・。行に行こう。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

line-break
-
word-break
break-word
overflow-wrap
-
word-wrap
-

気象状況七夕のく。も今日の天気、は、問題があ。ります。大・阪、の夏は暑いね。今年は旅行に行こう。今年は・、旅・。行に行こう。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


overflow-wrap

インライン要素に対して、テキストが行ボックスをあふれないように、ブラウザーが分割できない文字列の途中で改行を入れるかどうかの設定を適用。

normal:通常の単語の分割位置 (2 つの単語の間の空白など) でのみ改行することを示します。
anywhere:あふれることを避けるために、行内にその他の分割可能な位置がない場合、その他の分割できない文字列 — 長い単語や URL — が任意の場所で分割されることがあります。分割位置にハイフン文字は挿入されません。コンテンツの最小固有寸法を計算する時には、単語分割によって導入された折り返し可能位置が考慮されます。
break-word:anywhere の値と同様に、行内にその他の分割可能な位置がない場合、通常は分割可能でない単語が任意の場所で分割されますが、コンテンツの最小固有寸法を計算する時に、単語分割によって導入された折り返し可能位置が考慮されません。

line-break
-
word-break
-
overflow-wrap
-
word-wrap
-

気象状況七夕のく。も今日の天気、は、問題があ。ります。大・阪、の夏は暑いね。今年は旅行に行こう。今年は・、旅・。行に行こう。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

line-break
-
word-break
-
overflow-wrap
normal
word-wrap
-

気象状況七夕のく。も今日の天気、は、問題があ。ります。大・阪、の夏は暑いね。今年は旅行に行こう。今年は・、旅・。行に行こう。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

line-break
-
word-break
-
overflow-wrap
anywhere
word-wrap
-

気象状況七夕のく。も今日の天気、は、問題があ。ります。大・阪、の夏は暑いね。今年は旅行に行こう。今年は・、旅・。行に行こう。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

line-break
-
word-break
-
overflow-wrap
break-word
word-wrap
-

気象状況七夕のく。も今日の天気、は、問題があ。ります。大・阪、の夏は暑いね。今年は旅行に行こう。今年は・、旅・。行に行こう。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


word-wrap

改行しなければテキストがコンテンツボックスからあふれる場合に、ブラウザーが改行を挿入するかどうかを指定します。

normal:単語の途中で改行はしません。この場合、必要に応じて表示範囲を拡大します。
break-word:必要に応じて単語の途中で改行します。

line-break
-
word-break
-
overflow-wrap
-
word-wrap
-

気象状況七夕のく。も今日の天気、は、問題があ。ります。大・阪、の夏は暑いね。今年は旅行に行こう。今年は・、旅・。行に行こう。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

line-break
-
word-break
-
overflow-wrap
-
word-wrap
normal

気象状況七夕のく。も今日の天気、は、問題があ。ります。大・阪、の夏は暑いね。今年は旅行に行こう。今年は・、旅・。行に行こう。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

line-break
-
word-break
-
overflow-wrap
-
word-wrap
break-word

気象状況七夕のく。も今日の天気、は、問題があ。ります。大・阪、の夏は暑いね。今年は旅行に行こう。今年は・、旅・。行に行こう。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.