手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >用CSS解决中英文混合字符串的截取省略问题的解决办法
用CSS解决中英文混合字符串的截取省略问题的解决办法
摘要:作为一个程序员,经常需要面对的一个问题就是在新闻等信息的标题列表中,常常为了适应表格的宽度,需要对过长的标题文字的进行截取并在截取后的文字末...

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

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

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

在Div中的方法:

<DIVSTYLE="width:200px;border:1pxdashedred;overflow:hidden;text-overflow:ellipsis">

<NOBR>就是比如有一行文字,很长,表格内一行显示不下.</NOBR>

<NOBR>就a是比如有一行文字,很长,表格内一行显示不下.</NOBR>

<NOBR>就1是比如有一行文字,很长,表格内一行显示不下.</NOBR>

<NOBR>就F是比如有一行文字,很长,表格内一行显示不下.</NOBR>

<NOBR>就是LikeYouPigVeryVeryVeryMuch.</NOBR>

</DIV>

在Table中的方法:

<TABLEstyle="table-layout:fixed;border-collapse:collapse;font-size:12px;"border="1"width="200"bordercolor=#666666>

<TR>

<TDnowrapstyle="overflow:hidden;text-overflow:ellipsis;">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</TD>

</TR>

</TABLE>

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

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

【用CSS解决中英文混合字符串的截取省略问题的解决办法】相关文章:

比较全的CSS浏览器兼容问题整理总结

用CSS的float属性创建三栏布局网页的方法

CSS让ul所有的li居中显示的方法

CSS中文字体对应的英文写法

CSS div居中的三种方法

DIV CSS解决不规则文字排版

CSS:div 实现长英文字母自动换行CSS

浏览器不支持position: fix的解决

css实现连续的英文或数字自动换行的方法

解决跨浏览器兼容的CSS编码准则

精品推荐
分类导航