易截截图软件、单文件、免安装、纯绿色、仅160KB

用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控制,也不会造成太


相关文档:

改变页面使用的CSS文件,使网页进行布局或色调等改变

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<LINK href="../css/skin1.css" mce_href="css/skin1.css" rel="stylesheet" type="text/css">
<mce:script language="JavaScript" type="text/javascript"><!--
function changeSkin(n ......

推荐一个 CSS 框架 Lovely CSS


The Lovely CSS Framework is a simple and straight forward way to easily
deploy an XHTML/CSS site.
Based on a simple 960px wide grid system, featuring multiple column layouts,
and various pluggable add-ons.
这个由 Constantinos Demetriadis 创建的项目是一个 CSS 框架,基于 960.gs,还拥有一个插件 ......

CSS基础教程整理

这里只把一些我自己还需要改进的地方发上来。
————————————————————————
1.网页不是静态的、绝对的媒体。这意味着内能伸缩变形,用户应该被允许调整自己喜欢的方式, ......

没想到的、不常用的三个css属性!

作者:tinyhill 来自:蓝色理想 对 《5 个简单实用的 CSS 属性》进行编辑
1、CSS Clip
剪辑 (clip) 属性就像一个面具。它允许你使用矩形掩盖页面元素的内容。要剪辑一个元素:你必须指定其 position 属性为 absolute,然后指定相对于元素的 top,right,bottom,left 值。
图片剪辑实例(演示)
以下示例演示了如 ......

png 图片CSS兼容

.
Transparent
{
     width
: 16px
;
     height
: 42px
;
     background
: transparent
url(images/transparent.png)
no-repeat
;       
}
 
*
html
.
Transparent
{
 &nbs ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号