Comment utiliser CSS pour résoudre le problème de l'interception et de l'omission de chaînes mixtes chinoises et anglaises

Comment utiliser CSS pour résoudre le problème de l'interception et de l'omission de chaînes mixtes chinoises et anglaises_Échange d'expérience

WBOY

Libérer： 2016-05-16 12:08:44

original

1966 Les gens l'ont consulté

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

　　众所周知，有很多方法可以实现这个功能，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>

Le code est très simple. En gros il doit être facile à comprendre. Il réside principalement dans l'attribut "text-overflow". Cet attribut a deux valeurs, à savoir "ellipse" et "clip". first La première valeur ajoutera des points de suspension à la fin du texte après troncature, la deuxième valeur ne le fera pas.

Je n'ai trouvé aucun bug avec cette méthode jusqu'à présent, et le contrôle CSS ne causera pas trop de surcharge. Je pense que c'est une méthode utile !