css不更好吗？
就目前而言，js实现几率为0....当然你愿意去做是可以的，用width/一个字符的宽度，然后得到的商是这个element的最大字符数量，但是现在的字符有些不等宽，会造成溢出或不够。。。
文本溢出
有些时候，文本会超出一个元素，这通常称为文本溢出，我们使用text-overflow来进行文本溢出的操作，如下：
text-overflow:[ clip | ellipsis | <string>]{1,2}
clip 这个关键字的意思是"在内容区域的极限处截断文本"，因此在字符的中间可能会发生截断驾为了能在两
个字符过渡处截断，你必须使用一个空字符串值 ('')此为默认值驾
ellipsis 这个关键字的意思是☆用一个省略号 ('□', U+2026 HORIZONTAL ELLIPSIS)来表示被截断的文本★驾这个
省略号被添加在内容区域中，因此会减少显示的文本驾如果空间太小到连省略号都容纳不下，那么这个省
略号也会被截断驾
<string> <string>用来表示被截断的文本驾字符串内容将被添加在内容区域中，所以会减少显示出的文本驾如果空
间太小到连省略号都容纳不下，那么这个字符串也会被截断驾
<FULL_PAGE_VALUE> 全局值 inherit | initial | unset
纯手打，求采纳o(^▽^)o
1、用js实现这样的功能纯粹就是浪费性能，不划算，最好用css来实现；
2、用css设置超出省略非常简单
.text{
width: 300px
overflow: hidden
white-space: nowrap
text-overflow: ellipsis
}
3、如果你实在想用js来实现这样的效果，那么，有两种方法：
先获取dom的宽度，判断宽度是不是大于预设的宽度，如果大于，就删掉最后的几个字，然后继续判断；
获取dom的宽度，如果宽度大于预设值，就用js改变dom的css样式。
<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才能出现省略号,所以这里不适用,如果你有兴趣可以睇下面我发表过既回答,见下面参考资料地址.
