用CSS解决中英文混合字符串的截取省略问题的解决办法
更新时间：2007年02月27日 00:00:00 作者：
作为一个程序员，经常需要面对的一个问题就是在新闻等信息的标题列表中，常常为了适应表格的宽度，需要对过长的标题文字的进行截取并在截取后的文字末端加上省略号。
众所周知，有很多方法可以实现这个功能，JavaScript，ASP，PHP都有各自的实现方法，但是面临的问题有很多，比如中英文混杂时或在某些编码下，容易造成截取出现乱码的问题，虽然大多数问题已经有比较成熟的解决方案，但在数据量比较大时，使用JavaScript，ASP，PHP实现这一功能，无疑会给客户端或服务器端造成比较大的资源开销。
随着W3C的渐渐普及，许多网站都在进行着将传统表格转化为DIV+CSS的布局方式，我在研究CSS与DIV的一些特性时，发现了一个比较有趣的CSS，经过一系列的研究和实验以后，发现了一个使用DIV+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>
<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>
<TR>
<TD nowrap style="overflow:hidden;text-overflow:ellipsis;">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</TD>
</TR>
</TABLE>
代码很简单，基本上应该很容易就可以看明白，主要在于“text-overflow”这个属性，此属性有2个值，分别是“ellipsis”和“clip”，简单的理解，第一个值会在截取之后在文字末端加上省略号，第二个值则不会。
这个方法目前我还没有发现任何bug，CSS控制，也不会造成太大的开销，自我感觉，是一个有用的方法！
相关文章
今天在蓝色理想瞎逛，看见了Realazy的教程CSS Sprites，于是来自己做了个小东西，效果在这里2008-05-05
Bootstrap 自带以下特性：全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。HTML的基本元素均可以通过class设置样式并得到增强效果。2023-07-07
Internet Explorer 8 beta 中文版与IE7共存的解决方法
今天安装了IE8，去微软网站下载的时候发现已经提供中文版的beta了，哈哈 发现IE8没有传说中的那么妖魔化，不错的浏览器，新增功能不错。2008-05-05
IE8 Beta1已出，其中我们能看到很多的新特性，如layout引擎将“完全”支持CSS2.1和HTML 5，所以和之前IE浏览器所使用的Layout引擎并不相同，之前的IE浏览器并不完全符合互联网标准。2008-06-06
CSS Expression也称为CSS表达式，它是动态设置CSS属性的强大方法，但也存在着一定的危险性。2008-09-09
转自国外网站，本想翻译成中文，但是细看文章实在是简单，如果看不懂这个，我想也就没必要继续做前端了。2008-02-02
随着越来越多的网站使用HTTPS加密，现在HTTPS的使用已经成了硬性要求了。虽然说https是http的安全版，但两者还是有不少区别的。本文从https、http的概念和原理入手，讲解他们的不同，让读者朋友能够真正理解。2022-12-12
div+css详解定位与定位应用...2007-04-04
网页设计布局基础...2007-02-02
我们都熟知JavaScript可能会对Web页面的加载与显示产生较大的影响，因此我们常常关注JavaScript是不是会占用客户端较多的资源，然而大部分都会忽略的一件有趣的事情，CSS也会对Web页面载入的效率产生影响。2008-05-05
最新评论