word-break-auto-phrase-001.html (1139B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Text level 4 Test: word-break:auto-phrase in Japanese</title> 4 <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> 5 <link rel="help" href="https://drafts.csswg.org/css-text-4/#word-break-property"> 6 <link rel="match" href="reference/word-break-auto-phrase-001-ref.html"> 7 <meta name="assert" content="word-break:auto-phrase inserts virtual word boundaries at reasonable points."> 8 <style> 9 div { 10 font-size: 2em; 11 border: solid black; 12 margin: 5px; 13 width: min-content; /*not 0, to avoid falling into overflow fallback behavior */ 14 word-break: normal 15 } 16 #test { 17 word-break: auto-phrase; 18 } 19 #ref { 20 border-color: blue; 21 word-break: keep-all; 22 } 23 </style> 24 25 <p>Test passes if the black box is identical to the blue one. 26 27 <div id=test lang=ja> 28 東京へ行きましょう。 29 </div> 30 <div id=ref lang=ja> 31 東京へ<wbr>行きましょう。 32 </div> 33 <!-- As phrase detection is up to the UA, 34 arguably an alternative decomposition 35 with wbr before AND after へ 36 might be OK, 37 but the last phrase is longer anyway, 38 so the difference is not visible. 39 -->