div实现截取的数据长度

转载 2007年09月12日 18:16:00

很多时候,我们希望一些文字(比如网站首页新闻块的标题),在一行内显示,并且超出它的长度范围时,则加...省略,并且出现提示。  
  我们通常的解决方法是在服务器端判断内容的长度,超出多少个字符则截断,并添加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
 

相关文章推荐

css实现超出div长度用省略号表示

源代码其实不复杂,写法如下: 双宽带+无线WiFi 网速升3倍 WiFi手机设置无线上网的方法   不过你不能照搬上述代码到你的网页里,要弄清楚div样式里的几个属性。 ...

从文档读取数据并截取任意长度

  • 2013年12月26日 14:52
  • 897B
  • 下载

jstl/el表达式截取后台传入数据的长度

转载 ${wjcd.lrsj}原来得到的是如2006-11-12 11:22:22.0${fn:substring(wjcd.lrsj, 0, 16)}使用functions函数来获取list的长度...

可变长度数据的管道实现方法

管道是两个进程之间的一种通讯方式。比如甲和乙

STM32实现USART+DMA接收未知长度的数据和发送

转自http://www.lxway.com/4095951911.htm 前言:开始学USART+DMA的时候看到帖子《STM32 UART DMA实现未知数据长度接收》,觉得方法妙极了。此下出自...

如果系统要使用超大整数(超过long长度范围),请你设计一个数据结构来存储这种超大型数字以及设计一种算法来实现超大整数加法运算

public class T1 { /** * 如果系统要使用超大整数(超过long长度范围),请你设计一个数据结构来存储这种超大型数字以及设计一种算法来实现超大整数加法运算)。 */ ...
  • cs_12
  • cs_12
  • 2014年10月10日 16:23
  • 545

如果系统要使用超大整数(超过long长度范围),请你设计一个数据结构来存储这种超大型数字以及设计一种算法来实现超大整数加法运算)

博客分类: 面试中用到的 /**     * 超大整数相加:     * 题目要求:如果系统要使用超大整数(超过long的范围),请你设计一个数据结构来存储这种     *...

Tea 任何长度数据加密的一个实现

如下为tea 加密的一个实现,可以实现任何长度数据的加密。 TEA 是八字节分组,加密之后的长度不是和原来输入明文数据的长度。 把原明文数据长度作为加密数据的一部分存储,在解密的时候还原原始明文的...
  • free2o
  • free2o
  • 2014年03月26日 10:15
  • 982

【Codeforces Round 271 (Div 2)D】【DP】Flowers 黑色必须连续摆放k,长度为n的摆放方案数

D. Flowers time limit per test 1.5 seconds memory limit per test 256 megabytes inpu...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:div实现截取的数据长度
举报原因:
原因补充:

(最多只允许输入30个字)