`
tomp110
  • 浏览: 30641 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

CSS解决中英文混合字符串的截取省略问题

    博客分类:
  • Css
阅读更多
随着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”这个属性,此属性有2个值,分别是“ellipsis”和“clip”,简单的理解,第一个值会在截取之后在文字末端加上省略号,第二个值则不会。

转自http://yardan.blog.51cto.com/304821/83018
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics