CSS3

プロパティ

word-break

→●、mdn

文字間の分断規則。

このプロパティは、字°⇔間の自動折り返し機会 ― すなわち、テキスト行のどこが、分断を許可可能な“通常の所”とされるか ― を指定する。具体的には、タイポ グラフィック字°単位⇔間に［自動折り返し機会は、一般に存在するかどうか］を制御する ― ただし、この目的に限り、Unicode 行分断法クラス［NU／AL／AI／ID］に属する（字°でない）タイポ グラフィック文字単位もタイポ グラフィック字°単位として扱うとする。

このプロパティは、［自動折り返し機会のうち［空白やその他のスペース分離子により作成される／約物の周りに作成される］もの］を統治する規則には、影響しない（約物や小書き仮名に影響する制御については、line-break を見よ）。

注記： 過フローする場合に限り、追加の分断機会を可能化するときは、overflow-wrap を見よ。

normal

行分断規則にて述べたように、単語を、その慣例の規則に則って分断する。異なる 2 種のよくあるふるまいを呈する韓国語では、連続する、どの［ハングル、韓文漢字］⇔間でも分断が許容される。同じく 2 種のふるまいを呈するアムハラ語では、そのような分断は単語の中では許容されない。

<DIV style="border:1px solid red; width:100px; font-size:20px;
 word-break:normal;
">あい うえおかきくけ<BR>abcde fghijklmnopqrs
</DIV>

break-all

normal による自動折り返し機会に加えて、“単語”の中で分断することも許容される。

<DIV style="border:1px solid red; width:100px; font-size:20px;
 word-break:break-all;
">あい うえおかきくけ<BR>abcde fghijklmnopqrs
</DIV>

具体的には、行分断法の目的においては、次に挙げるものは、代わりに ID（ideographic character、表語文字）として扱われる：

• タイポ グラフィック字°単位
• タイポ グラフィック文字単位のうち、その Unicode 行分断法クラスが 次のいずれかに解決されるもの：
  
  NU（“numeric” ＝ 数量）
  AL（“alphabetic” ＝ アルファベットの）
  SA（“Southeast Asian” ＝ 東南アジアの）

ハイフン化は適用されない。

注記： この値は、約物周りの自動折り返し機会には影響しない。分断をどこでも許容したければ、line-break: anywhere を見よ。

注記： このオプションは、アムハラ語用に、他のよくあるふるまいを可能化する。また、［CJK 文字が元々支配的で、非 CJK テキストは 短い引用に限られる文脈］の下で［テキストを各行に、より良好に分布させたいと欲されるとき］に利用されることも多い。

keep-all

“単語”の中で分断することは、禁止される： タイポ グラフィック字°単位（あるいは、Unicode 行分断法クラス［NU／AL／AI／ID］に属する他のタイポ グラフィック文字単位）⇔間の、暗黙的な自動折り返し機会は抑止される ― すなわち、そのような文字⇔間の分断は、辞書に基づく分断法に因り存在する機会を除いて、禁則される（line-break に対する anywhere 以外の設定に関わらず）。他に関しては、normal と等価になる。このスタイルにおいては、CJK 文字並びは分断しない。

<DIV style="border:1px solid red; width:100px; font-size:20px;
 word-break:keep-all;
">あい うえおかきくけ<BR>abcde fghijklmnopqrs
</DIV>

注記： これは、韓国語における もう一つのよくあるふるまい（単語⇔間にスペースを利用する）である。また、［スペースを分離に利用するような別の言語の中に、CJK 片が混在している］ような、複数の用字系が混在するテキストに対しても有用になる。

break-word

<DIV style="border:1px solid red; width:100px; font-size:20px;
 word-break:break-word;
">あい うえおかきくけ<BR>abcde fghijklmnopqrs
</DIV>

<DIV style="border:1px solid black; width:100px; font-size:20px;">
<SPAN style="word-break:break-word">あい うえおかきくけ<BR>abcde fghijklmnopqrs
</DIV>

ある特定の字種に属する字°と同じ仕方で行分断する記号は、それらの字°と同じ仕方で影響される。

関連

white-space、overflow-wrap、word-wrap。

¶注意： overflow-wrap:anywhere による影響が強い。

テスト