hanging-punctuation-block-bound-001-ref.html (1045B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Reference Test</title> 6 7 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 8 9 <style> 10 div 11 { 12 font-family: monospace; 13 font-size: 60px; 14 line-height: 1.5em; /* computes to 90px */ 15 } 16 17 /* 18 We draw the box (perfectly fitted to the content 19 in the block axis, because it has the same content) 20 but not the text. 21 */ 22 23 div#box-drawn-under 24 { 25 background-color: lime; 26 border: black solid 3px; 27 color: transparent; 28 position: absolute; 29 width: 240px; 30 z-index: -1; 31 } 32 33 /* 34 We draw the text, but into a wider box so 35 the period will fit, and overlap it with 36 the previously-drawn box. 37 */ 38 39 div#text-drawn-over 40 { 41 border: transparent solid 3px; 42 width: 300px; 43 } 44 </style> 45 46 <body lang="ja"> 47 48 <div id="box-drawn-under">まだよく<br>ています。</div> 49 50 <div id="text-drawn-over">まだよく<br>ています。<br>しかし特</div>