text-overflow-iframe.html (3665B)
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html><head> 3 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 4 <title>text-overflow: Test 12</title> 5 <style type="text/css"> 6 7 .test { 8 border: thin dashed black; 9 overflow: hidden; 10 white-space: nowrap; 11 -o-text-overflow: ellipsis; 12 text-overflow: ellipsis; 13 font: 1em bold monospace; 14 background:lime; 15 color: black; 16 margin-left:400px; 17 height: 12em; 18 text-shadow: #6374AB 5px -12px 2px; 19 } 20 21 body { 22 width:800px; 23 } 24 25 img { width: 50px; height: 50px; outline:5px dotted yellow; } 26 span { 27 font-size:16px; 28 background:pink; 29 border: 5px dashed blue; 30 padding: 0 25px; 31 text-decoration: underline overline line-through; 32 color:brown; 33 text-shadow: none; 34 } 35 i { 36 display:inline-block; 37 height: 50px; 38 width: 5em; 39 background: blue; 40 outline:5px dotted yellow; 41 text-shadow: none; 42 } 43 u { 44 padding-left:140px; 45 } 46 v { 47 padding-right:140px; 48 } 49 .rtl { 50 direction:rtl; 51 } 52 .rlo span { 53 unicode-bidi: bidi-override; direction: rtl; 54 } 55 .lro span { 56 unicode-bidi: bidi-override; direction: ltr; 57 } 58 .h {display:none} 59 iframe { 60 width: 100px; 61 height: 50px; 62 } 63 </style> 64 <script> 65 var c = "data:text/html,<style>body {white-space: nowrap;overflow:hidden;-o-text-overflow: ellipsis;text-overflow: ellipsis;}</style><body bgcolor='magenta'>CSS is awesome" 66 function initIFRAME() { 67 var f = document.getElementsByTagName('iframe'); 68 for (i = 0; i < f.length; ++i) { 69 f[i].setAttribute('src', c); 70 } 71 setTimeout(function(){document.body.style.width='500px'},0); 72 } 73 function setTextOverflow(str,quoted) { 74 var x = document.styleSheets[0]; 75 var q = quoted ? '"' : ''; 76 x.insertRule('.test{text-overflow:' + q + str + q +'}', x.cssRules.length); 77 } 78 </script> 79 </head><body onload="initIFRAME()"> 80 text-overflow:"<input placeholder="type text then <ENTER>" onchange='setTextOverflow(this.value,1)'>" | <button onclick="setTextOverflow('ellipsis')">ellipsis</button> | <button onclick="setTextOverflow('clip')">clip</button> (Try "." or "" for example) <br> 81 82 LTR / LTR 83 <div class="test"> 84 <span><iframe></iframe>CSS is awesome CSS<i>overflowing-inline-block</i><u> is awesome</u></span><br> 85 <span>CSS is awe<iframe></iframe>some CSS is awesome <i></i></span><br> 86 <span>C SS is awesome<button>BUTTON</button> CSS is <iframe></iframe>awesom e </span><br> 87 <span>C­SS is awesome CSS is awesom­e <button>BUTTON</button></span><br> 88 <br><br></div> 89 90 RTL / LTR 91 <div class="test rtl"> 92 <span><iframe></iframe><v>CSS is awesome CSS</v><i>overflowing-inline-block</i> is awesome </span><br> 93 <span>CSS is awe<iframe></iframe>some CSS is awesome <i></i></span><br> 94 <span>C SS is awesome<button>BUTTON</button> CSS is <iframe></iframe>awesom e </span><br> 95 <span>C­SS is awesome CSS is awesom­e <button>BUTTON</button></span><br> 96 <br><br></div> 97 98 99 LTR / RTL 100 <div class="test rlo"> 101 <span><iframe></iframe>CSS is awesome CSS<i>overflowing-inline-block</i> is awesome </span><br> 102 <span>CSS is awe<iframe></iframe>some CSS is awesome <i></i></span><br> 103 <span>C SS is awesome<button>BUTTON</button> CSS is <iframe></iframe>awesom e </span><br> 104 <span><button>BUTTON</button>C­SS is awesome CSS is awesom­e </span><br> 105 <br><br></div> 106 107 RTL / RTL 108 <div class="test rtl rlo"> 109 <span><iframe></iframe>CSS is awesome CSS<i>overflowing-inline-block</i> is awesome </span><br> 110 <span>CSS is awe<iframe></iframe>some CSS is awesome <i></i></span><br> 111 <span>C SS is awesome<button>BUTTON</button> CSS is <iframe></iframe>awesom e </span><br> 112 <span><button>BUTTON</button>C­SS is awesome CSS is awesom­e </span><br> 113 <br><br></div> 114 115 </body></html>