line-breaking-ic-001.html (1073B)
1 <!doctype html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Text — line breaking at element boundary with ideographic caracters 1</title> 5 <meta name=assert content="For soft wrap opportunities defined by the boundary between two characters, the white-space property on nearest common ancestor of the two characters controls breaking."> 6 <link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details"> 7 <link rel=match href="reference/line-breaking-ic-001-ref.html"> 8 <link rel=author title="Florian Rivoal" href="http://florian.rivoal.net"> 9 <style> 10 div { 11 color: green; 12 background: green; 13 line-height: 1em; 14 width: 1em; 15 white-space: normal; 16 font-size: 20px; 17 } 18 span { 19 white-space: pre; 20 } 21 .container { 22 position: relative; 23 } 24 .fail { 25 color: red; 26 background: red; 27 position: absolute; 28 left: 0; 29 top: 1em; 30 z-index: -1; 31 } 32 </style> 33 <body> 34 <p>There should be a green rectangle and no red.</p> 35 <div class=container> 36 <div><span>口</span>口</div> 37 <div class=fail>口</div> 38 <div> 39 </body> 40 </html>