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">var str = "I want this effect, not that one."
var br = 22
alert('错误：'+str.substr(0,br))
if(str.charAt(br) != ' ') br=str.indexOf(' ',br) //判断当前字符非空格，则查找向后第一个空格
alert('正确'+str.substr(0,br))
</script>
<html xmlns="">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html charset=utf-8"/>
<title></title>
<script src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
function fang(){
$("#er").css("display", "block")
$("#but").css("display", "none")
$("#but1").css("display", "block")
}
function shou() {
$("#er").css("display", "none")
$("#but").css("display", "block")
$("#but1").css("display", "none")
}
</script>
<style type="text/css">
.a1{
position:relative
color:red
width:100%
}
.b1{
position:relative
float:left
width:20%
}
.b2{
position:relative
float:left
width:60%
}
.b3{
position:relative
float:left
width:20%
}
span{
width:100%
position:relative
float:left
height:40px
}
.but{
display:none
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="a1">
<div class="b1">电脑CPU</div>
<div class="b2"><span >酷睿I3</span><span id="er">酷睿I5</span></div>
<div class="b3">
<input type="button" id="but" class="but" onclick="fang()" value="更多" />
<input type="button" id="but1" class="but1" onclick="shou()" value="收起" />
</div>
</div>
</form>
</body>
</html>
忘采纳！
