可以显示3行，第三行末尾变省略号
<script type="text/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:#FF0099font-size:0.78emmargin:0.5em}
/*Sample 1*/
.textOverflow{width:50%border:solid 1px #222222}
.textOverflow div
{
height:1.5em
position:relative
font-size:0.78em
width:95%
border-bottom:solid 1px #aaaaaa
padding:2pxwhite-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:absoluteright:0bottom:-0.2emwidth:1.5emtext-align:rightheight:2emmin-width:41pxtext-decoration:nonebackground:url(text-fade.png) repeat-ydisplay: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>
<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>
另外补充table其实用css可以免去<div>这个标签也能够实现省略号效果,不过同样道理只能在ie才能出现省略号,所以这里不适用,如果你有兴趣可以睇下面我发表过既回答,见下面参考资料地址.
