用CSS解决中英文混合字符串的截取省略问题的解决办法(css英文代码翻译)

发布时间：2024-02-27

作为一个程序员，经常需要面对的一个问题就是在新闻等信息的标题列表中，常常为了适应表格的宽度，需要对过长的标题文字的进行截取并在截取后的文字末端加上省略号。　　众所周知，有很多方法可以实现这个功能，JavaScript，ASP，PHP都有各自的实现方法，但是面临的问题有很多，比如中英文混杂时或在某些编码下，容易造成截取出现乱码的问题，虽然大多数问题已经有比较成熟的解决方案，但在数据量比较大时，使用JavaScript，ASP，PHP实现这一功能，无疑会给客户端或服务器端造成比较大的资源开销。　　随着W3C的渐渐普及，许多网站都在进行着将传统表格转化为DIV+CSS的布局方式，我在研究CSS与DIV的一些特性时，发现了一个比较有趣的CSS，经过一系列的研究和实验以后，发现了一个使用DIV+CSS实现这一功能的另类方法，此方法在我所能测试均无问题，并且良好的兼容于各种编码及中英文混排的情况。

在Div中的方法：

<DIV STYLE="width: px; 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:px;" border="1" width="" bordercolor=#> <TR> <TD nowrap style="overflow:hidden;text-overflow:ellipsis;">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</TD> </TR> </TABLE>

　　代码很简单，基本上应该很容易就可以看明白，主要在于“text-overflow”这个属性，此属性有2个值，分别是“ellipsis”和“clip”，简单的理解，第一个值会在截取之后在文字末端加上省略号，第二个值则不会。　　这个方法目前我还没有发现任何bug，CSS控制，也不会造成太大的开销，自我感觉，是一个有用的方法！

推荐整理分享用CSS解决中英文混合字符串的截取省略问题的解决办法(css英文代码翻译)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:用css解决中英文的问题,用css解决中英文错误问题,css的中文,用css解决中英文错误问题,css的中文,用css解决中英文错误问题,用css解决中英文错误的是,用css解决中英文错误的是,内容如对您有帮助，希望把文章链接给更多的朋友！

Web标准学习资源（书籍、网站）推荐一、Web标准学习书籍推荐1、《网站重构--应用WEB标准进行设计》作者:（美）塞尔达曼译者:王宗义/傅捷/祝军页数:出版社:电子工业出版社定价:装帧:

shtml精简教程让你知道什么是shtml 目前，主要有以下几种用用途：1、显示服务器端环境变量2、将文本内容直接插入到文档中3、显示WEB文档相关信息(如文件制作日期/大小等)4、直接执行

很不错的 CSS Hack 又学了一招 CSSHackheight:px;/*ForFirefox*/*height:px;/*ForIE7&IE6*/_height:px;/*ForIE6*/今天学到了一手，效果不错，哇卡卡卡卡