word-break-auto-phrase-overflow-001.html (1372B)
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-overflow-001-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 font-size: 10px; 24 border: 1px solid; 25 } 26 </style> 27 <div class="container" lang="ja"> 28 <!-- Both phrases can fit to 7em, but the whole sentence doesn't. --> 29 <div style="width: 7em"> 30 楽しいドライブ。</div> 31 <!-- The 2nd phrase doesn't fit to `4em`, hence fallback to normal. --> 32 <div style="width: 4em"> 33 楽しいドライブ。</div> 34 <!-- Only one character can fit to `1em`, but no break before the period. --> 35 <div style="width: 1em"> 36 楽しいドライブ。</div> 37 <!-- Breaks even before the period if `overflow-wrap`. --> 38 <div style="width: 1em; overflow-wrap: anywhere"> 39 楽しいドライブ。</div> 40 </div>