当前位置:  编程技术>WEB前端

用CSS解决中英文混合字符串的截取省略问题的解决办法

    来源: 互联网  发布时间:2014-09-06

    本文导语:  作为一个程序员,经常需要面对的一个问题就是在新闻等信息的标题列表中,常常为了适应表格的宽度,需要对过长的标题文字的进行截取并在截取后的文字末端加上省略号。  众所周知,有很多方法可以实现这个功能,Jav...

作为一个程序员,经常需要面对的一个问题就是在新闻等信息的标题列表中,常常为了适应表格的宽度,需要对过长的标题文字的进行截取并在截取后的文字末端加上省略号。

  众所周知,有很多方法可以实现这个功能,JavaScript,ASP,PHP都有各自的实现方法,但是面临的问题有很多,比如中英文混杂时或在某些编码下,容易造成截取出现乱码的问题,虽然大多数问题已经有比较成熟的解决方案,但在数据量比较大时,使用JavaScript,ASP,PHP实现这一功能,无疑会给客户端或服务器端造成比较大的资源开销。

  随着W3C的渐渐普及,许多网站都在进行着将传统表格转化为DIV+CSS的布局方式,我在研究CSS与DIV的一些特性时,发现了一个比较有趣的CSS,经过一系列的研究和实验以后,发现了一个使用DIV+CSS实现这一功能的另类方法,此方法在我所能测试均无问题,并且良好的兼容于各种编码及中英文混排的情况。

在Div中的方法:

 
就是比如有一行文字,很长,表格内一行显示不下. 
就a是比如有一行文字,很长,表格内一行显示不下. 
就1是比如有一行文字,很长,表格内一行显示不下. 
就F是比如有一行文字,很长,表格内一行显示不下. 
就是 Like You Pig Very Very Very Much. 

在Table中的方法:



内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容


  代码很简单,基本上应该很容易就可以看明白,主要在于“text-overflow”这个属性,此属性有2个值,分别是“ellipsis”和“clip”,简单的理解,第一个值会在截取之后在文字末端加上省略号,第二个值则不会。

  这个方法目前我还没有发现任何bug,CSS控制,也不会造成太大的开销,自我感觉,是一个有用的方法!


    
 
 

您可能感兴趣的文章:

  • 解决ie动态修改link样式,import css不刷新的问题
  • 部署到iis后无法加载运行CSS文件的解决方法
  • 解决IE6 3像素Bug的css写法
  • CSS技巧DIV为空时占据空间的解决办法
  • IE6不能正常解析CSS文件问题的解决方法及原因分析
  • PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
  • 使用CSS解决文字环绕图片问题的代码
  • php ci框架中加载css和js文件失败的解决方法
  • CSS解决未知高度垂直居中的问题
  • Web服务器/前端 iis7站长之家
  • 用div+css解决出现水平滚动条问题
  • css常见问题解决方法小结
  • CSS 浏览器的等宽空格问题解决
  • xhtml+css网页制作中常见问题解决方法
  • asp.net2.0中css失效的解决方法
  • CSS解决未知高度垂直居中
  • css浏览器不兼容原因分析及解决办法第1/2页
  • Css浏览器兼容的解决方法
  • 低版本IE正常运行HTML5+CSS3网站的3种解决方案
  • 浏览器兼容解决FF/IE6/IE7背景专用CSS HACK
  • CSS控制长文本内容显示(截取的地方用省略号代替)
  • CSS文字截取功能实现代码
  • 用css截取字符的几种方法详解(css排版隐藏溢出文本)
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • java命名空间javax.swing.text.html类css的类成员方法: css定义及介绍
  • <!--@import"css/cssset/.css-->,css/cssset/.css是什么意思?
  • java命名空间javax.swing.text.html类css的类成员方法: getattribute定义及介绍
  • CSS预处理器 Less CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: font定义及介绍
  • css强制换行 css强制不换行的css方法
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: margin定义及介绍
  • CSS代码格式化 CSS Beautify
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: padding定义及介绍
  • jquery css类用法(添加、修改与删除css)
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: border定义及介绍
  • CSS 框架 Simpl.css
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: clear定义及介绍
  • CSS解析器 CSS Parser
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: height定义及介绍
  • CSS压缩器 Css Compressor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: color定义及介绍
  • Eclipse的CSS编辑插件 CSS Editor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: display定义及介绍
  • jQuery添加/改变/移除CSS类及判断是否已经存在CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: float定义及介绍
  • CSS代码检查工具 CSS Lint


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3