1 <!DOCTYPE html>
2 <html><head><meta charset="utf-8">
3 <title>CSS Text — line breaking at element boundary</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-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 width: 1em;
12 line-height: 1em;
13 font-family: ahem;
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 position: absolute;
26 left: 0;
27 top: 1em;
28 z-index: -1;
29 }
30 </style>
31 </head><body>
32 <p>There should be a green rectangle and no red.</p>
33 <div class="container">
34 <div><span>X</span>​<span>X</span></div>
35 <div class="fail">X</div>
36 </div>
37
38
39 </body></html>