範囲を指定したブロック要素※の中で、word-breakを設定した場合、設定や、文字によって区切りの扱いに違いがあります。
- [全角と半角での区切り]
- [「。」句点などの振る舞い]
※：実例としてp要素の幅をwidth:150px、word-breakの値をnormal、break-all、keep-allについて検証しています。
p.1{width:150px; background-color:#ff9999; word-break: normal;}
p.2{width:150px; background-color:#ff9999; word-break: break-all;}
p.3{width:150px; background-color:#ff9999; word-break: keep-all;}
（実際に検証した際のCSS）
全角と半角での区切り
word-break: normal;の場合
和文（※1）としての全角文字「○」の文字列中に現れる「a」については区切りとして認識されていません。 欧文（※2）としての「a」の文字列の中に現れる、全角文字「○」は区切りとして、認識されています。しかも、「a」→「○」と「○」→「a」で区切りとして認識されています。
[]
word-break: break-all;の場合
p要素の範囲（width:150px）を優先これに収まるように表示します。
[]
word-break: keep-all;の場合
全角、半角を区切りとして認識せず、「文字列の塊の幅（※3）」を優先して表示します。
[]
「。」句点などの振る舞い
「。」句点など区切り文字の扱いで違いがあります。そこで、和文として全角文字○の中、欧文としてaの文字列の中で、それぞれ、区切り文字として以下の順で検証しました。
1.「、」
2.「。」
3.「，」（全角カンマ）
4.「．」（全角ピリオド）
5.「, 」（半角カンマ＋半角スペース）
6.「. 」（半角ピリオド＋半角スペース）
7.「,」（半角カンマ）
8.「.」（半角ピリオド）
9.「 」（全角スペース）
10.「 」（半角スペース）
word-break: normal;の場合
和文の中では全ての区切り文字を区切りとして認識せず、 p要素の範囲（width:150px）を優先これに収まるように表示しています。欧文の中では「,」（半角カンマ）「.」（半角ピリオド）を区切りとして認識せず、「文字列の塊の幅」を優先して表示しています。
[]
word-break: break-all;の場合
和文、欧文の中で全ての区切り文字を区切りとして認識せず、 p要素の範囲（width:150px）を優先これに収まるように表示しています。
[]
word-break: keep-all;の場合
和文の中では「。」「．」（全角ピリオド）を区切りとして認識せず、「文字列の塊の幅」を優先して表示しています。欧文の中では「。」「．」（全角ピリオド）「,」（半角カンマ）「.」（半角ピリオド）を区切りとして認識せず、「文字列の塊の幅」を優先して表示しています。
[]
(※1)和文:ここでは代表として全角文字の「○」で検証しています。
(※2)欧文：ここでは代表として「a」で検証しています。
(※3)文字列の塊の幅：ここでは文字列の集合をあたかもimg要素での幅があるかのような連想で言っています。もちろんブロック要素ではありません。
|
コメント（0）
