用CSS解决中英文混合字符串的截取省略问题的解决办法
作为一个程序员,经常需要面对的一个问题就是在新闻等信息的标题列表中,常常为了适应表格的宽度,需要对过长的标题文字的进行截取并在截取后的文字末端加上省略号。
众所周知,有很多方法可以实现这个功能,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”这个属性,此属性有2个值,分别是“ellipsis”和“clip”,简单的理解,第一个值会在截取之后在文字末端加上省略号,第二个值则不会。
这个方法目前我还没有发现任何bug,CSS控制,也不会造成太
相关文档:
Internet Explorer 8预设是以CSS 2.1为标准,并修正了许多Internet Explorer 7的CSS Bug,这意味着有一部份以往依据IE 7所设计的网页,
在IE 8上的呈现会有所出入,所幸拜IE 7相容检视功能所赐,目前因使用IE 8而导致版面错误的网站并不多。
但一值依赖IE 7相容检视功能并非长久之计,尽早将网站修改为IE 8相容才是长久 ......
注:"elm"代表某个DOM元素,"xxx"代表某个CSS属性
一、elm.style.xxx 只能获取内联样式里的值
要想获得正确的css值:
IE:elm.currentStyle[xxx]
W3C标准:document.defaultView.getComputedStyle(elm,"")[xxx]
注意:用IE方法返回值可能不是数字,而是auto;用w3c的方法总是会返回数字+单位
三、offsetLeft
......
这里只把一些我自己还需要改进的地方发上来。
————————————————————————
1.网页不是静态的、绝对的媒体。这意味着内能伸缩变形,用户应该被允许调整自己喜欢的方式, ......
盒子标签和属性对照
CSS语法(不区分大小写)
JavaScript语法(区分大小写)
border
border
border-bottom
borderBottom
border-bottom-color
borderBottomColor
border-bottom-style
borderBottomStyle
border-bottom-width
borderBottomWidth
border-color
borderColor
border-left
borderLeft
border ......
作者:tinyhill 来自:蓝色理想 对 《5 个简单实用的 CSS 属性》进行编辑
1、CSS Clip
剪辑 (clip) 属性就像一个面具。它允许你使用矩形掩盖页面元素的内容。要剪辑一个元素:你必须指定其 position 属性为 absolute,然后指定相对于元素的 top,right,bottom,left 值。
图片剪辑实例(演示)
以下示例演示了如 ......