<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>text-overflow: Test 12</title> <style type="text/css"> .test { border: thin dashed black; overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; font: 1em bold monospace; background:lime; color: black; margin-left:400px; height: 12em; text-shadow: #6374AB 5px -12px 2px; } body { width:800px; } img { width: 50px; height: 50px; outline:5px dotted yellow; } span { font-size:16px; background:pink; border: 5px dashed blue; padding: 0 25px; text-decoration: underline overline line-through; color:brown; text-shadow: none; } i { display:inline-block; height: 50px; width: 5em; background: blue; outline:5px dotted yellow; text-shadow: none; } u { padding-left:140px; } v { padding-right:140px; } .rtl { direction:rtl; } .rlo span { unicode-bidi: bidi-override; direction: rtl; } .lro span { unicode-bidi: bidi-override; direction: ltr; } .h {display:none} iframe { width: 100px; height: 50px; } </style> <script> 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" function initIFRAME() { var f = document.getElementsByTagName('iframe'); for (i = 0; i < f.length; ++i) { f[i].setAttribute('src', c); } setTimeout(function(){document.body.style.width='500px'},0); } function setTextOverflow(str,quoted) { var x = document.styleSheets[0]; var q = quoted ? '"' : ''; x.insertRule('.test{text-overflow:' + q + str + q +'}', x.cssRules.length); } </script> </head><body onload="initIFRAME()"> 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> LTR / LTR <div class="test"> <span><iframe></iframe>CSS is awesome CSS<i>overflowing-inline-block</i><u> is awesome</u></span><br> <span>CSS is awe<iframe></iframe>some CSS is awesome <i></i></span><br> <span>C SS is awesome<button>BUTTON</button> CSS is <iframe></iframe>awesom e </span><br> <span>C­SS is awesome CSS is awesom­e <button>BUTTON</button></span><br> <br><br></div> RTL / LTR <div class="test rtl"> <span><iframe></iframe><v>CSS is awesome CSS</v><i>overflowing-inline-block</i> is awesome </span><br> <span>CSS is awe<iframe></iframe>some CSS is awesome <i></i></span><br> <span>C SS is awesome<button>BUTTON</button> CSS is <iframe></iframe>awesom e </span><br> <span>C­SS is awesome CSS is awesom­e <button>BUTTON</button></span><br> <br><br></div> LTR / RTL <div class="test rlo"> <span><iframe></iframe>CSS is awesome CSS<i>overflowing-inline-block</i> is awesome </span><br> <span>CSS is awe<iframe></iframe>some CSS is awesome <i></i></span><br> <span>C SS is awesome<button>BUTTON</button> CSS is <iframe></iframe>awesom e </span><br> <span><button>BUTTON</button>C­SS is awesome CSS is awesom­e </span><br> <br><br></div> RTL / RTL <div class="test rtl rlo"> <span><iframe></iframe>CSS is awesome CSS<i>overflowing-inline-block</i> is awesome </span><br> <span>CSS is awe<iframe></iframe>some CSS is awesome <i></i></span><br> <span>C SS is awesome<button>BUTTON</button> CSS is <iframe></iframe>awesom e </span><br> <span><button>BUTTON</button>C­SS is awesome CSS is awesom­e </span><br> <br><br></div> </body></html>