word-break-auto-phrase-wbr-nobr-002.html (1049B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property"> 4 <link rel="match" href="reference/word-break-auto-phrase-wbr-nobr-002-ref.html"> 5 <!-- 6 This test assumes that all engines segment a Japanese text: 7 楽しいドライブ 8 to the following phrases: 9 楽しい / ドライブ 10 11 While assuming all engines segment this way looks fairly reasonable, 12 segmenting differently doesn't necessarily mean a failure because the 13 algorithm is UA dependent. Please add references if different. 14 --> 15 <style> 16 @font-face { 17 font-family: mplus; 18 src: url(/fonts/mplus-1p-regular.woff); 19 } 20 .container > div { 21 font-family: mplus; 22 word-break: auto-phrase; 23 width: 10em; 24 font-size: 10px; 25 border: 1px solid; 26 } 27 nobr { 28 white-space: nowrap; 29 } 30 </style> 31 <div class="container" lang="ja"> 32 <!-- `<nobr>` can turn 4 phrases to 3 phrases. --> 33 <div>楽しいドライブ、楽しいドライブ。</div> 34 <div>楽しい<nobr>ドライブ、楽しい</nobr>ドライブ。</div> 35 </div>