Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
<!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>