white-space-2-ref.html (1723B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <!-- Reference --> 5 <style> 6 div { font:16px sans-serif; border:1px solid black; } 7 .container { float:left; width:20%; border-color:cyan; } 8 p { width:0; } 9 b { font-weight:normal; background-color:yellow; white-space:pre; } 10 .cell { display:table-cell; border:1px solid green; } 11 .hang { display:inline-block; width:0; overflow:visible; } 12 .hang span { display:inline; background-color:yellow; } 13 .clip { overflow: hidden; } 14 </style> 15 </head> 16 <body> 17 18 <div> 19 <p><span class="cell"><b>Hello 20 Kitty</b></span> 21 <p><span class="cell"><b>Hello Kitty</b></span> 22 <p><span class="cell"><b>Hello Kitty</b></span> 23 <p><span class="cell"><b>Hello 24 Kitty</b></span> 25 </div> 26 27 <div class="container"> 28 <p><span class="cell"><b>Hello 29 Kitty</b></span> 30 <p><span class="cell"><b>Hello 31 Kitty</b></span> 32 <p><span class="cell"><b>Hello 33 Kitty</b></span> 34 <p><span class="cell"><b>Hello 35 Kitty</b></span> 36 </div> 37 38 <div class="container"> 39 <p><span class="cell"><b>Hello 40 Kitty</b></span> 41 <p><span class="cell"><b>Hello Kitty</b></span> 42 <p><span class="cell"><b>Hello Kitty</b></span> 43 <p><span class="cell clip"><b>Hello<span class="hang"><span> </span></span> 44 Kitty</b></span> 45 </div> 46 47 <div class="container"> 48 <p><span class="cell"><b>Hello 49 Kitty</b></span> 50 <p><span class="cell"><b>Hello Kitty</b></span> 51 <p><span class="cell"><b>Hello Kitty</b></span> 52 <p><span class="cell"><b>Hello 53 Kitty</b></span> 54 </div> 55 56 <div class="container"> 57 <p><span class="cell"><b>Hello<span class="hang"><span> </span></span> 58 Kitty</b></span> 59 <p><span class="cell"><b>Hello 60 Kitty</b></span> 61 <p><span class="cell"><b>Hello<span class="hang"><span> </span></span> 62 Kitty</b></span> 63 <p><span class="cell"><b>Hello 64 Kitty</b></span> 65 </div> 66 67 </body> 68 </html>