CSS를 활용하여 한문과 영문이 혼합된 문자열의 가로채기, 누락 문제를 해결하는 방법

CSS를 활용하여 한문과 영문이 혼합된 문자열의 가로채기, 누락 문제를 해결하는 방법_체험교류

WBOY

풀어 주다： 2016-05-16 12:08:44

원래의

1966명이 탐색했습니다.

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

　　众所周知，有很多方法可以实现这个功能，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" 속성에 있습니다. 이 속성은 간단한 이해를 위해 "ellipsis"와 "clip"이라는 두 가지 값을 갖습니다. first 첫 번째 값은 잘린 후 텍스트 끝에 타원을 추가하지만 두 번째 값은 그렇지 않습니다.

이 방법은 아직까지 버그를 발견하지 못했고 CSS 제어도 오버헤드를 많이 일으키지 않을 만큼 유용한 방법이라고 생각합니다!