word-break-auto-phrase-002.html (1285B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Text level 4 Test: word-break: auto-phrase</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-002-ref.html"> 7 <meta name="assert" content="word-break: auto-phrase inserts virtual word boundaries at reasonable points, creating soft wrapping opportunities"> 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 } 22 </style> 23 24 <p>Test passes if the black box is identical to either the blue one. 25 26 <div id=test lang=th> 27 กรุงเทพคือสวยงาม 28 </div> 29 <div id=ref lang=th> 30 กรุงเทพ<wbr>คือ<wbr>สวยงาม 31 </div> 32 33 <!-- 34 In this particular example, 35 the expected results is one word phrases. 36 Therefore, even if auto-phrase for thai isn't specifically supported, 37 this ought to work. 38 But if it is supported, 39 gluing everything together would be mistaken: 40 this is auto-phrase, 41 not auto-sentence. 42 -->