主页 > 知识库 > 用CSS解决中英文混合字符串的截取省略问题的解决办法

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

热门标签:呼叫中心市场需求 检查注册表项 智能手机 网站文章发布 银行业务 美图手机 铁路电话系统 服务器配置
作为一个程序员,经常需要面对的一个问题就是在新闻等信息的标题列表中,常常为了适应表格的宽度,需要对过长的标题文字的进行截取并在截取后的文字末端加上省略号。

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

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

在Div中的方法:

DIV STYLE="width: 200px;  border: 1px dashed red; overflow: hidden; text-overflow:ellipsis"
NOBR>就是比如有一行文字,很长,表格内一行显示不下./NOBR
NOBR>就a是比如有一行文字,很长,表格内一行显示不下./NOBR
NOBR>就1是比如有一行文字,很长,表格内一行显示不下./NOBR
NOBR>就F是比如有一行文字,很长,表格内一行显示不下./NOBR
NOBR>就是 Like You Pig Very Very Very Much./NOBR
/DIV>

在Table中的方法:

TABLE style="table-layout:fixed;border-collapse:collapse;font-size:12px;" border="1" width="200" bordercolor=#666666>
TR>
TD nowrap style="overflow:hidden;text-overflow:ellipsis;">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容/TD>
/TR>
/TABLE>


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

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

您可能感兴趣的文章:
  • php字符串截取问题
  • JS 截取字符串substr 和 substring方法的区别
  • js 日期字符串截取分割成单个具体的日期(2009-12-30 13:28:29)
  • PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
  • php从右向左/从左向右截取字符串的实现方法
  • php字符串截取的简单方法
  • JS截取字符串常用方法详细整理
  • php截取中文字符串不乱码的方法
  • php,js,css字符串截取的办法集锦

标签:乐山 沧州 上海 沈阳 长治 新疆 红河 河南

巨人网络通讯声明:本文标题《用CSS解决中英文混合字符串的截取省略问题的解决办法》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266