word-break（単語中の改行処理） | CSS

word-break は、単語内の改行（区切り）方法を指定する時に使います。
具体的には、隣接する typographic letter 単位（Unicodeの文字または数字の一般的なカテゴリの一つに属する文字の単位 [UAX44]、または、Unicode line breaking classes の NU、AL、AI、ID に属する他の typographic character 単位 [UAX14]）の間に自動改行が存在するかどうかを制御します。スペースや句読点によって作られる自動改行には影響しません。

名前	:	word-break
値	:	normal \| keep-all \| break-all \| break-word
初期値	:	normal
適用対象	:	全ての要素
継承	:	する
パーセンテージ	:	n/a
メディア	:	visual（視覚的）
計算値	:	As specified（指定通り）
正規順序	:	n/a
アニメーション	:	discrete（離散的）

Value（値）

normal: 初期値デフォルトの規則に従って改行される。
日本語、韓国語（ハングル、韓文漢字）は指定された幅（行）に合わせて単語の途中でも改行され、英語は単語ごとで改行される。 CSS3
keep-all: 指定された幅（行）を越えても単語の途中では改行されない。 CSS3
break-all: 指定された幅（行）に合わせて単語の途中であっても改行される。
具体的には、normal の自動改行に加えて、 Unicode line breaking classes の NU （数字）、AL （アルファベット）、SA （東南アジア）に解決される typographic character 単位は、代わりに改行の目的で ID （ideographic characters / 表意文字）として扱われる。ハイフネーション（-）は適用されない。テキストが主に CJK（ Chinese 中国語・Japanese 日本語・Korean 朝鮮語の略）文字で、非 CJK は短い引用のみで構成される文脈で使用され、テキストが各行でよりよく分散されることが望まれる。CSS3
break-word: 区切る場所がない文字列（長いURLなど）は、指定された幅（行）に好ましい改行場所がない場合、任意の場所で区切（改行）られる。
形成文字（あたかも単語が改行していないように形成されている文字）の Grapheme Cluster（書記素クラスタ）は、１つの単位としてまとまっていなければならない。ハイフネーション（-）は改行場所に挿入されない。この値の動作は、word-wrap / overflow-wrap: break-word と同じだが、最も小さいコンテンツのインラインサイズを計算するときはこの値が考慮される。CSS3

Grapheme Cluster（書記素クラスタ）

書記体系の基本単位である「文字」は１つの Unicode コードポイントではない場合もあります。たとえば、Á の文字は「A」+ アクセント記号「´」から構成されており、 2つの Unicode コードポイント（U+0041、U+00B4）で表されています。見た目は一文字に見えますが、実際には、書記素クラスタ（grapheme cluster）によって近似されています。 [UAX29]

書記素（grapheme）：コードポイントの結合を一文字とする単位（最小の図形単位）
書記素クラスタ（grapheme cluster）：書記素を構成するコードポイントの集めて１つの文字にしたもの（ユーザーが認識する文字）

＜例＞

CJK の組版では、word-break：break-all を有効にすることで、英語単語をスペースやハイフネーションポイントではなく、文字間で分割することができます。

見出しの章・節名や、図版の説明（caption）などは省いてもよい。しかし、図版の caption が２行や３行になるとき

※ 日本語に埋め込まれた英語のテキストは、単語内の任意の場所で改行されています。

韓国語は、韓国語音節間で改行する（word-break: normal）スタイルと、英語のように、主にスペースで改行する（word-break: keep-all）スタイルがあります。

각 줄의 마지막에 한글이 올 때 줄 나눔 기 /* 音節間で改行 */ 준을 “글자” 또는 “어절” 단위로 한다.

각 줄의 마지막에 한글이 올 때 줄 나눔 /* スペースのみ改行 */ 기준을 “글자” 또는 “어절” 단위로 한다.

＜例＞以下はテキストのサンプルです。

这是一些汉字, and some Latin, و کمی نوشتن عربی,
และตัวอย่างการเขียนภาษาไทย.

改行場所は以下のように決定されます（ '·'で示されます）。

word-break: normal

这·是·一·些·汉·字, ·and·some·Latin, ·و· کمی· نوشتن· عربی,·
และ· ตัวอย่าง· การเขียน· ภาษาไทย.

word-break: break-all

这·是·一·些·汉·字, ·a·n·d·s·o·m·e·L·a·t·i·n,· و· ک·م·ی· ن·و·ش·ت·ن· ع·ر·ب·ی,·
แ·ล·ะ·ตั·ว·อ· ย่·า·ง·ก·า·ร· เ·ขี·ย·น·ภ·า· ษ·า·ไ·ท·ย.

word-break: keep-all

这是一些汉字, ·and·some·Latin, ·و· کمی· نوشتن· عربی,·
และ·ตัวอย่าง· การเขียน·ภาษาไทย.

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   p.test1 { word-break: normal; }
   p.test2 { word-break: keep-all; }
   p.test3 { word-break: break-all; }
   p.test4 { word-break: break-word; }
  </style>
 </head>
 <body>
   <p class="test1">http://***.jp/***/***.html ここは日本語で書かれた文章 Text written in English</p>
   <p class="test2">http://***.jp/***/***.html ここは日本語で書かれた文章 Text written in English</p>
   <p class="test3">http://***.jp/***/***.html ここは日本語で書かれた文章 Text written in English</p>
   <p class="test4">http://***.jp/***/***.html ここは日本語で書かれた文章 Text written in English</p>
 </body>
</html>

display

http://***.jp/***/***.html ここは日本語で書かれた文章 Text written in English