div实现截取的数据长度

很多时候，我们希望一些文字(比如网站首页新闻块的标题),在一行内显示，并且超出它的长度范围时，则加...省略，并且出现提示。  
  我们通常的解决方法是在服务器端判断内容的长度，超出多少个字符则截断，并添加title提示。asp代码类似如下：  
  <%  
  if   len(mystr)>20   then  
  response.write   "<span   title='"   &   mystr   &"'>"   &   left(mystr,17)   &   "...</span>"  
  else  
  response.write   "<span>"   &   mystr   &   "</span>"  
  end   if  
  %>  
  这样的方法有几个缺点：    
   
  1,消耗服务器资源。    
  2,通用性差.一旦你的显示宽度变化了，你就需要重新调整要显示的字符个数。    
  3,更重要的是,常常对不齐。一是字符种类(汉字,大小写字母，全半角标点)不同，则宽度不同。二是字号大小不同，宽度也不同，最大号字和最小号字的宽度差了很多。    
  因此，这种方法显得不够理想，我们有必要另想办法。    
  解决办法：   先看示例，,其中表格内左右两块内容完全相同。超出长度的自动省略了，并有提示。注意第二行，在左边，由于容器宽度不够，它是省略有提示的，在右边，由于宽度够，则它是普通模式。你还可以调整IE的“查看   》文字大小”，调成不同的字大小看一看，刷新后再调几下。   这里是相关示例代码，你可以修改后运行：  
  <style>  
  #leftnewstd   .ellipsis_row{width:170px}  
  #rightnewstd   .ellipsis_row{width:250px}  
  .ellipsis_row{  
  overflow:hidden;  
  text-overflow:ellipsis;  
  white-space:nowrap;  
  wzy:expression(                 this.title=this.offsetWidth<this.children(0).offsetWidth?this.children(0).innerText:'',  
          this.style.wzy=''  
  );  
  background-color=#b0b0b0;  
  }  
  </style>  
  <table     ><tr>  
  <td   id=leftnewstd   width=200px   bgcolor=#f0f0ff   >    
  <span   class=ellipsis_row><span>多以开源起家   美国计算机专业前20名著名学校点评</span></span><br>  
  <span   class=ellipsis_row   ><span>挑战微软数据库管理案例</span></span><br>  
  <span   class=ellipsis_row   ><span>WWW：15年谁主沉浮？</span></span>  
  </td>  
  <td   id=rightnewstd   width=280px   bgcolor=#f0fff0>    
  <span   class=ellipsis_row   ><span>多以开源起家   美国计算机专业前20名著名学校点评</span></span><br>  
  <span   class=ellipsis_row   ><span>挑战微软数据库管理案例</span></span><br>  
  <span   class=ellipsis_row   ><span>WWW：15年谁主沉浮？</span></span>  
  </tr></table>  
     
   
  解释：样式中的overflow,text-overflow,和white-space,三者来结合实现省略功能。css表达式   expression来实现，加提示。用this.offsetWidth<this.children(0).offsetWidth来判断是内容是否超过容器宽度。是的话，加title提示.应用完表达式之后，用this.style.wzy=''来清空它，以免影响页面效率。   

贴自:http://topic.csdn.net/t/20051215/18/4461758.html