word-break-auto-phrase-wbr-nobr-001.html (1083B)
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-001-ref.html"> 5 <!-- 6 This test assumes that all engines segment a Japanese text: 7 ドライブ 8 as a single phrase. 9 10 While assuming all engines segment this way looks fairly reasonable, 11 segmenting differently doesn't necessarily mean a failure because the 12 algorithm is UA dependent. Please add references if different. 13 --> 14 <style> 15 @font-face { 16 font-family: mplus; 17 src: url(/fonts/mplus-1p-regular.woff); 18 } 19 .container > div { 20 font-family: mplus; 21 word-break: auto-phrase; 22 width: 3em; 23 font-size: 10px; 24 border: 1px solid; 25 } 26 </style> 27 <div class="container" lang="ja"> 28 <!-- A phrase that doesn't fit should fall back to `normal`. --> 29 <div>ドライブ</div> 30 <!-- `<wbr>` in a phrase should allow breaking there. --> 31 <div>ドラ<wbr>イブ</div> 32 <!-- `​` in a phrase should allow breaking there too. --> 33 <div>ドラ​イブ</div> 34 </div>