text-overflow-ruby-ref.html (2237B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>Reference: text-overflow:ellipsis and ruby</title> 9 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 10 <style> 11 html,body { 12 color:black; background-color:white; font:14px/1 monospace; padding:0; margin:0; 13 } 14 15 .clip { 16 overflow: hidden; 17 width: 40px; 18 text-overflow: ellipsis; 19 } 20 21 input { width: 40px; -webkit-appearance: none; border: 1px solid black; } 22 span { white-space: pre; } 23 .thg { display: inline-table; } 24 .tc { display: inline-table; } 25 .t { display: inline-table; } 26 27 </style> 28 </head> 29 <body> 30 31 <div style="float:left; width:300px"> 32 <div class="clip"> 33 <span><span><span>aa<input class="thg">bb</span></span></span> 34 <br> 35 <span><span><span>aa<div class="thg">bbbbbb</div>cc</span></span></span> 36 <br> 37 <span><span><span>aa<span>bbbbbb</span>cc</span></span></span> 38 <br> 39 <span><span><span>aa<input class="tc">bb</span></span></span> 40 <br> 41 <span><span><span>aa<div class="tc">bbbbbb</div>cc</span></span></span> 42 <br> 43 <span><span><span>aa<input class="t">bb</span></span></span> 44 <br> 45 <span><span><span>aa<div class="t">bbbbbb</div>cc</span></span></span> 46 47 <br> 48 <span><span><span><input class="thg">bb</span></span></span> 49 <br> 50 <span><span><span><div class="thg">bbbbbb</div>cc</span></span></span> 51 <br> 52 <span><span><span><span>bbbbbb</span>cc</span></span></span> 53 <br> 54 <span><span><span><input class="tc">bb</span></span></span> 55 <br> 56 <span><span><span><div class="tc">bbbbbb</div>cc</span></span></span> 57 <br> 58 <span><span><span><input class="t">bb</span></span></span> 59 <br> 60 <span><span><span><div class="t">bbbbbb</div>cc</span></span></span> 61 </div> 62 </div> 63 64 <div style="float:left; width:300px"> 65 <div class="clip"> 66 <span><span><input class="thg">bb</span></span> 67 <br> 68 <span><span><div class="thg">bbbbbb</div>cc</span></span> 69 <br> 70 <span><span>bbbbbbcc</span></span> 71 <br> 72 <span><span><input class="tc">bb</span></span> 73 <br> 74 <span><span><div class="tc">bbbbbb</div>cc</span></span> 75 <br> 76 <span><span><input class="t">bb</span></span> 77 <br> 78 <span><span><div class="t">bbbbbb</div>cc</span></span> 79 </div> 80 </div> 81 82 </body> 83 </html>