文本溢出后用省略号代替-CSDN博客

<!doctypehtmlpublic"-//w3c//dtdhtml4.01//en""http://www.w3.org/tr/html4/strict.dtd">
<html>
<head>
<metahttp-equiv=content-typecontent="text/html;charset=utf-8">
<title>onunderflow</title>
<scriptlanguage="JavaScript">
functioninitMozTextOverflow(obj)
{
functionre_render()
{
doMozTextOverflow(obj);
}
setTimeout(re_render,0);

}
functiondoMozTextOverflow(obj)
{
function_overflow(e)
{
varel=e.currentTarget;
el.className="_textOverflow";
}
function_underflow(e)
{
varel=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.οnmοusedοwn=function(e)
{
this.selectStartX=e.clientX-document.getBoxObjectFor(this).x;
}
obj.οnmοuseup=function(e)
{
this.selectStartX=null;
}
obj.οnmοusemοve=function(e)
{
if(this.selectStartX!=null)
{
varmx=e.clientX-this.selectStartX;
varex=this.offsetWidth-this.selectStartX;

if((ex-mx)<(this.ins.offsetWidth+3))
{
if(this.className!="_textUnderflow")
{
this.className="_textUnderflow";
this.scrollLeft=0;
varbox=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"
}

}
returnfalse;
}
};
}
</script>
<style>
body{
font-family:Verdana;
}
p{
color:#FF0099;
font-size:0.78em;
margin:0.5em;
}
/*Sample1*/
.textOverflow{
width:50%;
border:solid1px#222222;
}
.textOverflowdiv
{
height:1.5em;
position:relative;
font-size:0.78em;
width:95%;
border-bottom:solid1px#aaaaaa;
padding:2px;white-space:nowrap;
overflow:hidden;
margin:2px0;
text-overflow:ellipsis;
-moz-binding:url("moz-text-overflow.xml#XBLDocument");/*ExtensibleBidingLanguageforFirefox*/
}
.textOverflowdivins{
position:absolute;
right:0;
bottom:-0.2em;
width:1.5em;
text-align:right;
height:2em;
min-width:41px;
text-decoration:none;
background:url(text-fade.png)repeat-y;
display:none;
}
.textOverflowdiv._textUnderflow{
overflow:auto;
}
.textOverflowdiv._textUnderflowins{
display:none;
}
.textOverflowdiv._textOverflow{
overflow:hidden;
}
.textOverflowdiv._textOverflowins{
display:block;
}
table.textOverflow{
table-layout:fixed;
}
</style>
</head>
<body>
<h1></h1>
<h2>Make<strong>Text-Overflow</strong>workonbothIEandFirefox</h2>
<p>Ifthetextinsideeachlineexceedthewidthofeachline,thenyouwillsee"..."(ellipsis)showsupattheendofeachline.</p>
<p>Trytoresizethewindoworchangethefontsizetoseeif"..."(ellipsis)willshowupordisappear.</p>
<h3>Demo-Listing</h3>
<olclass="textOverflow">
<li>
<div>sitamet,consectetueradipiscingelit.Inmollis.Aeneanviverra,pedeinblanditultricies,enEnd!</div>
</li>
<li>
<div>sitamet,consectetueradipiscingelit.Inmollis.Aeneanviverra,pedeinblanditultriciesEnd!</div>
</li>
<li>
<div>sitamet,consectetueradipiscingelit.Inmollis.Aeneanviverra,pedeinblanditultriEnd!</div>
</li>
<li>
<div>sitamet,consectetueradipiscingelit.Inmollis.Aeneanviverra,pedeinblandituEnd!</div>
</li>
<li>
<div>sitamet,consectetueradipiscingelit.Inmollis.Aeneanviverra,pedeinblandEnd!</div>
</li>
<li>
<div>sitamet,consectetueradipiscingelit.Inmollis.Aeneanviverra,pedeinbEnd!</div>
</li>
<li>
<div>sitamet,consectetueradipiscingelit.Inmollis.Aeneanviverra,pedeEnd!</div>
</li>
<li>
<div>sitamet,consectetueradipiscingelit.Inmollis.Aeneanviverra,pEnd!</div>
</li>
<li>
<div>sitamet,consectetueradipiscingelit.Inmollis.AeneanviverrEnd!</div>
</li>
<li>
<div>sitamet,consectetueradipiscingelit.Inmollis.AeneanviEnd!</div>
</li>
<li>
<div>sitamet,consectetueradipiscingelit.Inmollis.AeneaEnd!</div>
</li>
<li>
<div>sitamet,consectetueradipiscingelit.Inmollis.AEnd!</div>
</li>
<li>
<div>sitamet,consectetueradipiscingelit.InmolliEnd!</div>
</li>
<li>
<div>sitamet,consectetueradipiscingelit.InmEnd!</div>
</li>
<li>
<div>sitamet,consectetueradipiscingelit.End!</div>
</li>
<li>
<div>sitamet,consectetueradipiscingelEnd!</div>
</li>
<li>
<div>sitamet,consectetueradipiscinEnd!</div>
</li>
<li>
<div>sitamet,consectetueradipiEnd!</div>
</li>
<li>
<div>sitamet,consectetueraEnd!</div>
</li>
<li>
<div>sitamet,consectetuEnd!</div>
</li>
<li>
<div>sitamet,consecEnd!</div>
</li>
<li>
<div>sitamet,coEnd!</div>
</li>
<li>
<div>sitametEnd!</div>
</li>
<li>
<div>sitEnd!</div>
</li>
<li>
<div>End!</div>
</li>
</ol>
<h3>Demo-DataGrid</h3>
<tableclass="textOverflow">
<tr>
<td><div>sitamet,consectetueradipiscingelit.Inmollis.Aeneanviverra,pedeinblanditultricies,enEnd!</div></td>
</tr>
<tr>
<td><div>sitamet,consectetueradipiscingelit.Inmollis.Aeneanviverra,pedeinblanditultriciesEnd!</div></td>
</tr>
<tr>
<td><div>sitamet,consectetueradipiscingelit.Inmollis.Aeneanviverra,pedeinblanditultriEnd!</div></td>
</tr>
<tr>
<td><div>sitamet,consectetueradipiscingelit.Inmollis.Aeneanviverra,pedeinblandituEnd!</div></td>
</tr>
<tr>
<td><div>sitamet,consectetueradipiscingelit.Inmollis.Aeneanviverra,pedeinblandEnd!</div></td>
</tr>
<tr>
<td><div>sitamet,consectetueradipiscingelit.Inmollis.Aeneanviverra,pedeinbEnd!</div></td>
</tr>
<tr>
<td><div>sitamet,consectetueradipiscingelit.Inmollis.Aeneanviverra,pedeEnd!</div></td>
</tr>
<tr>
<td><div>sitamet,consectetueradipiscingelit.Inmollis.Aeneanviverra,pEnd!</div></td>
</tr>
<tr>
<td><div>sitamet,consectetueradipiscingelit.Inmollis.AeneanviverrEnd!</div></td>
</tr>
<tr>
<td><div>sitamet,consectetueradipiscingelit.Inmollis.AeneanviEnd!</div></td>
</tr>
<tr>
<td><div>sitamet,consectetueradipiscingelit.Inmollis.AeneaEnd!</div></td>
</tr>
<tr>
<td><div>sitamet,consectetueradipiscingelit.Inmollis.AEnd!</div></td>
</tr>
<tr>
<td><div>sitamet,consectetueradipiscingelit.InmolliEnd!</div></td>
</tr>
<tr>
<td><div>sitamet,consectetueradipiscingelit.InmEnd!</div></td>
</tr>
<tr>
<td><div>sitamet,consectetueradipiscingelit.End!</div></td>
</tr>
<tr>
<td><div>sitamet,consectetueradipiscingelEnd!</div></td>
</tr>
<tr>
<td><div>sitamet,consectetueradipiscinEnd!</div></td>
</tr>
<tr>
<td><div>sitamet,consectetueradipiEnd!</div></td>
</tr>
<tr>
<td><div>sitamet,consectetueraEnd!</div></td>
</tr>
<tr>
<td><div>sitamet,consectetuEnd!</div></td>
</tr>
<tr>
<td><div>sitamet,consecEnd!</div></td>
</tr>
<tr>
<td><div>sitamet,coEnd!</div></td>
</tr>
<tr>
<td><div>sitametEnd!</div></td>
</tr>
<tr>
<td><div>sitEnd!</div></td>
</tr>
<tr>
<td><div>End!</div></td>
</tr>
</table>
</body>
</html>