随着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
分享到:
相关推荐
用CSS解决中英文混合字符串的截取省略问题的解决办法
自己输入一个字符串,字符串中可以包括字符和汉字,截取指定的字符串
利用CSS截取字符串,更好的优化系统,节约资源,避免不必要的错误
复制代码代码如下: <... <head> <... <ul> <li>css截取字符串 css截取字符串css截取字符串css截取字符串</li> <li>css截取字符串 css截取字符串 css截取字符串 css截取字符串</li> <li>css截
strclass 一个微小的库,将CSS类作为字符串应用于对象
主要介绍了php,js,css字符串截取的办法,其实没有什么技术含量,就是记录一下,方便自己复习巩固,希望对大家能有所帮助
css自动截取指定长度字符串,结尾显示... 支持FF浏览器
div CSS样式表实现中英文双语切换导航条 div CSS样式表实现中英文双语切换导航条 div CSS样式表实现中英文双语切换导航条 div CSS样式表实现中英文双语切换导航条
截取字符串一般是用js或者后台语言来实现,其实使用CSS也是可以实现此效果的。下面通过一段实例代码给大家介绍CSS3截取字符串的方法,需要的朋友参考下吧
字符串过长,不雅观,如何实现多余文字街去掉并用省略号显示,苦思冥想多日,发现使用CSS就可轻松搞定,下面将经验心得与大家分享一番,望帮助更多的失足新手
style type=”text/css”> .listover150 { width:150px; text-align:left; overflow:hidden; text-overflow:ellipsis;//超长设置省略号 white-space:nowrap; } </style> 然后在后台GridView中...
css3中如何让多余的字符串消失并附加省略号的方法 可以使用 复制代码代码如下: white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-webkit-text-overflow:ellipsis;height:50px 让多余的内容隐藏并附加...
table中超长字符串怎么以省略号来表示,或许实现的方法有很多,本文为大家介绍下使用css来实现这个效果,感兴趣的朋友可以参考下
另一种方法则是在服务器端用left函数对标题字符串进行截取。两种方法通常情况下都能达到我们的目的: <style type="text/css">div{width:200px;overflow:hidden;}</style>轻轻松松在页面中插入单选...
.NET获取Html字符串中指定标签的指定属性的值 本代码为C#获取字符串中Html的指定标签的指定属性的值 ...要获取以上字符串中的img中的src或是a中的href等的值 GetHtmlAttr(tempstr,"img","src")这样就能获取到。
Css 导航 中英文
主要介绍了css实现字符串截断并加省略号示例,需要的朋友可以参考下
insert-css, 在 <head> 中插入一个css字符串 插入 css在 <head> 中插入一个css字符串 示例 var insertCss = require('insert-css'); var styleElement = insertCss('body