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控制超出字符溢出部分自动截取(或显示省略号)

 Html代码   div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ell...
  • xylz_yang
  • xylz_yang
  • 2014年07月10日 15:40
  • 2956

JS获取文本在HTML中的真实长度

用于检测HTML中input元素是否有文本truncation的API。
  • ybdesire
  • ybdesire
  • 2015年11月24日 21:25
  • 8444

JQuery常用DIV操作获取和设置长度宽度

获取或设置div的高度和宽度     方法一:height和width函数(得到的是证书),可以用于获取或设置元素的高度和宽度。   val()获取或设置元素的值   方法二:css函数可以用于...
  • ncut_LJD
  • ncut_LJD
  • 2016年03月17日 09:02
  • 5885

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

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

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

css实现超出div长度用省略号表示 源代码其实不复杂,写法如下: 双宽带+无线WiFi 网速升3倍 WiFi手机设置无线上网的方法 不过你不能照搬上述代码到你的网页里,要弄清楚div样...
  • fangwenzheng88
  • fangwenzheng88
  • 2017年10月31日 16:57
  • 80

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

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

stm32f103基于HAL库下DMA+空闲中断实现任意长度数据接收

  • 2017年07月27日 08:56
  • 8.65MB
  • 下载

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

转载 ${wjcd.lrsj}原来得到的是如2006-11-12 11:22:22.0${fn:substring(wjcd.lrsj, 0, 16)}使用functions函数来获取list的长度...
  • qq_28483283
  • qq_28483283
  • 2016年12月26日 10:15
  • 604

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

管道是两个进程之间的一种通讯方式。比如甲和乙
  • dahlwuyn
  • dahlwuyn
  • 2014年11月03日 21:37
  • 1265

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

转自http://www.lxway.com/4095951911.htm 前言:开始学USART+DMA的时候看到帖子《STM32 UART DMA实现未知数据长度接收》,觉得方法妙极了。此下出自...
  • Gdou_YUN
  • Gdou_YUN
  • 2017年01月13日 14:00
  • 618
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:div实现截取的数据长度
举报原因:
原因补充:

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