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