<html>
<head>
<meta http-equiv=content-type content="text/html; charset=utf-8">
<title>onunderflow</title>
<script language="JavaScript">
function initMozTextOverflow(obj)
{
function re_render()
{
doMozTextOverflow(obj);
}
setTimeout(re_render,0);
}
function doMozTextOverflow(obj)
{
function _overflow(e)
{
var el = e.currentTarget;
el.className="_textOverflow";
}
function _underflow(e)
{
var el = e.currentTarget;
el.className="_textUnderflow";
}
obj.className="_textUnderflow";
obj.addEventListener("overflow", _overflow, false);
obj.addEventListener("underflow", _underflow, false);
obj.ins = document.createElement("ins");
obj.ins.innerHTML="…";
obj.appendChild(obj.ins);
obj.onmousedown = function(e)
{
this.selectStartX = e.clientX - document.getBoxObjectFor(this).x;
}
obj.onmouseup = function(e)
{
this.selectStartX = null;
}
obj.onmousemove = function(e)
{
if(this.selectStartX!=null )
{
var mx = e.clientX - this.selectStartX;
var ex = this.offsetWidth - this.selectStartX;
if( ( ex - mx) < (this.ins.offsetWidth+3) )
{
if(this.className!="_textUnderflow")
{
this.className="_textUnderflow";
this.scrollLeft=0;
var box = document.createElement("input");
box.setAttribute("type","text");
box.value=1111
this.appendChild(box);
box.select();
this.removeChild(box);
this.focus();
}
}
else
{
if(this.className!="_textOverflow")
{
this.className="_textOverflow"
}
}
return false;
}
};
}
</script>
<style>
body{
font-family:Verdana;
}
p{
color:#FF0099;
font-size:0.78em;
margin:0.5em;
}
/*Sample 1*/
.textOverflow{
50%;
border:solid 1px #222222;
}
.textOverflow div
{
height:1.5em;
position:relative;
font-size:0.78em;
95%;
border-bottom:solid 1px #aaaaaa;
padding:2px;white-space:nowrap;
overflow:hidden;
margin:2px 0;
text-overflow:ellipsis;
-moz-binding:url("moz-text-overflow.xml#XBLDocument");/*Extensible Biding Language for Firefox*/
}
.textOverflow div ins{
position:absolute;
right:0;
bottom:-0.2em;
1.5em;
text-align:right;
height:2em;
min-41px;
text-decoration:none;
background:url(text-fade.png) repeat-y;
display:none;
}
.textOverflow div._textUnderflow{
overflow:auto;
}
.textOverflow div._textUnderflow ins{
display:none;
}
.textOverflow div._textOverflow{
overflow:hidden;
}
.textOverflow div._textOverflow ins{
display:block;
}
table.textOverflow{
table-layout:fixed;
}
</style>
</head>
<body>
<h1></h1>
<h2>Make <strong>Text-Overflow</strong> work on both IE and Firefox</h2>
<p>If the text inside each line exceed the width of each line, then you will see "..." (ellipsis) shows up at the end of each line.</p>
<p>Try to resize the window or change the font size to see if "..." (ellipsis) will show up or disappear.</p>
<h3>Demo - Listing</h3>
<ol class="textOverflow">
<li>
<div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit ultricies, en End!</div>
</li>
<li>
<div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit ultricies End!</div>
</li>
<li>
<div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit ultri End!</div>
</li>
<li>
<div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit u End!</div>
</li>
<li>
<div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in bland End!</div>
</li>
<li>
<div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in b End!</div>
</li>
<li>
<div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede End!</div>
</li>
<li>
<div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, p End!</div>
</li>
<li>
<div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverr End!</div>
</li>
<li>
<div>sit amet, consectetuer adipiscing elit. In mollis. Aenean vi End!</div>
</li>
<li>
<div>sit amet, consectetuer adipiscing elit. In mollis. Aenea End!</div>
</li>
<li>
<div>sit amet, consectetuer adipiscing elit. In mollis. A End!</div>
</li>
<li>
<div>sit amet, consectetuer adipiscing elit. In molli End!</div>
</li>
<li>
<div>sit amet, consectetuer adipiscing elit. In m End!</div>
</li>
<li>
<div>sit amet, consectetuer adipiscing elit. End!</div>
</li>
<li>
<div>sit amet, consectetuer adipiscing el End!</div>
</li>
<li>
<div>sit amet, consectetuer adipiscin End!</div>
</li>
<li>
<div>sit amet, consectetuer adipi End!</div>
</li>
<li>
<div>sit amet, consectetuer a End!</div>
</li>
<li>
<div>sit amet, consectetu End!</div>
</li>
<li>
<div>sit amet, consec End!</div>
</li>
<li>
<div>sit amet, co End!</div>
</li>
<li>
<div>sit amet End!</div>
</li>
<li>
<div>sit End!</div>
</li>
<li>
<div> End!</div>
</li>
</ol>
<h3>Demo - DataGrid</h3>
<table class="textOverflow">
<tr>
<td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit ultricies, en End!</div></td>
</tr>
<tr>
<td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit ultricies End!</div></td>
</tr>
<tr>
<td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit ultri End!</div></td>
</tr>
<tr>
<td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in blandit u End!</div></td>
</tr>
<tr>
<td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in bland End!</div></td>
</tr>
<tr>
<td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede in b End!</div></td>
</tr>
<tr>
<td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, pede End!</div></td>
</tr>
<tr>
<td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverra, p End!</div></td>
</tr>
<tr>
<td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean viverr End!</div></td>
</tr>
<tr>
<td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenean vi End!</div></td>
</tr>
<tr>
<td><div>sit amet, consectetuer adipiscing elit. In mollis. Aenea End!</div></td>
</tr>
<tr>
<td><div>sit amet, consectetuer adipiscing elit. In mollis. A End!</div></td>
</tr>
<tr>
<td><div>sit amet, consectetuer adipiscing elit. In molli End!</div></td>
</tr>
<tr>
<td><div>sit amet, consectetuer adipiscing elit. In m End!</div></td>
</tr>
<tr>
<td><div>sit amet, consectetuer adipiscing elit. End!</div></td>
</tr>
<tr>
<td><div>sit amet, consectetuer adipiscing el End!</div></td>
</tr>
<tr>
<td><div>sit amet, consectetuer adipiscin End!</div></td>
</tr>
<tr>
<td><div>sit amet, consectetuer adipi End!</div></td>
</tr>
<tr>
<td><div>sit amet, consectetuer a End!</div></td>
</tr>
<tr>
<td><div>sit amet, consectetu End!</div></td>
</tr>
<tr>
<td><div>sit amet, consec End!</div></td>
</tr>
<tr>
<td><div>sit amet, co End!</div></td>
</tr>
<tr>
<td><div>sit amet End!</div></td>
</tr>
<tr>
<td><div>sit End!</div></td>
</tr>
<tr>
<td><div> End!</div></td>
</tr>
</table>
</body>
</html>