text-overflow-ruby.html (2271B)
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>CSS Basic User Interface Test: text-overflow:ellipsis and ruby</title> 9 <link rel="help" href="http://www.w3.org/TR/css3-ui/#text-overflow"> 10 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 11 <link rel="match" href="text-overflow-ruby-ref.html"> 12 <style> 13 html,body { 14 color:black; background-color:white; font:14px/1 monospace; padding:0; margin:0; 15 } 16 17 .clip { 18 overflow: hidden; 19 width: 40px; 20 text-overflow: ellipsis; 21 } 22 23 input { width: 40px; -webkit-appearance: none; border: 1px solid black; } 24 25 .thg { display: table-header-group; } 26 .tc { display: table-cell; } 27 .t { display: table; } 28 29 </style> 30 </head> 31 <body> 32 33 <div style="float:left; width:300px"> 34 <div class="clip"> 35 <ruby><rb><span>aa<input class="thg">bb</span></rb></ruby> 36 <br> 37 <ruby><rb><span>aa<div class="thg">bbbbbb</div>cc</span></rb></ruby> 38 <br> 39 <ruby><rb><span>aa<span>bbbbbb</span>cc</span></rb></ruby> 40 <br> 41 <ruby><rb><span>aa<input class="tc">bb</span></rb></ruby> 42 <br> 43 <ruby><rb><span>aa<div class="tc">bbbbbb</div>cc</span></rb></ruby> 44 <br> 45 <ruby><rb><span>aa<input class="t">bb</span></rb></ruby> 46 <br> 47 <ruby><rb><span>aa<div class="t">bbbbbb</div>cc</span></rb></ruby> 48 49 <br> 50 <ruby><rb><span><input class="thg">bb</span></rb></ruby> 51 <br> 52 <ruby><rb><span><div class="thg">bbbbbb</div>cc</span></rb></ruby> 53 <br> 54 <ruby><rb><span><span>bbbbbb</span>cc</span></rb></ruby> 55 <br> 56 <ruby><rb><span><input class="tc">bb</span></rb></ruby> 57 <br> 58 <ruby><rb><span><div class="tc">bbbbbb</div>cc</span></rb></ruby> 59 <br> 60 <ruby><rb><span><input class="t">bb</span></rb></ruby> 61 <br> 62 <ruby><rb><span><div class="t">bbbbbb</div>cc</span></rb></ruby> 63 </div> 64 </div> 65 66 <div style="float:left; width:300px"> 67 <div class="clip"> 68 <ruby><rb><input class="thg">bb</rb></ruby> 69 <br> 70 <ruby><rb><div class="thg">bbbbbb</div>cc</rb></ruby> 71 <br> 72 <ruby><rb>bbbbbbcc</rb></ruby> 73 <br> 74 <ruby><rb><input class="tc">bb</rb></ruby> 75 <br> 76 <ruby><rb><div class="tc">bbbbbb</div>cc</rb></ruby> 77 <br> 78 <ruby><rb><input class="t">bb</rb></ruby> 79 <br> 80 <ruby><rb><div class="t">bbbbbb</div>cc</rb></ruby> 81 </div> 82 </div> 83 84 </body> 85 </html>