Heim  >  Artikel  >  Web-Frontend  >  So lösen Sie mit CSS das Problem des Abfangens und Weglassens gemischter chinesischer und englischer Zeichenfolgen_Erfahrungsaustausch

So lösen Sie mit CSS das Problem des Abfangens und Weglassens gemischter chinesischer und englischer Zeichenfolgen_Erfahrungsaustausch

WBOY
WBOYOriginal
2016-05-16 12:08:441922Durchsuche

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

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


Der Code ist im Grunde genommen leicht zu verstehen. Dieses Attribut hat zwei Werte, nämlich „ellipsis“ und „clip“. first Der erste Wert fügt nach dem Abschneiden am Ende des Textes Auslassungspunkte hinzu, der zweite Wert nicht.

Ich habe bisher keine Fehler bei dieser Methode gefunden und die CSS-Steuerung wird meiner Meinung nach keinen allzu großen Overhead verursachen!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn