ylog.net主页里有最新日记和最新评论两项,日记的标题和评论的内容经常超出长度而自动换行,只能用难看两字形容,这让我头痛不已...
首先想到的是截取一段,于是写了这个函数
这种操作用js,在客户端执行可以缓解服务器负担,而且js在操作字符串时有速度优势
<script>
CatString(str,len)
{
if (str.length>len)
str=str.substring(0,len-3,str)+"...";
document.write (str)
}
</script>
结果可想而知,因为英文和中文的打印长度不同,得到的结果是长短不齐,显然不是我要的效果
既然中文的宽度大约为两倍的英文宽度,那就把中文当成两个英文字符了,然后再截取出来,再还原#@$#@%$#!$#
代码我就不贴了,N长而且复杂,最要命的是在普通字体里英文字符的宽度并不全相同象M与f就相差甚远
郁闷半天,翻看CSS2.0手册里布局部分,发现有个属性叫overflow,原文如下
overflow : visible (专业提供视频软件下载)
auto (专业提供视频软件下载)
hidden (专业提供视频软件下载)
scroll
参数：
visible : 不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条
说明：
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
设置textarea对象为hidden值将隐藏其滚动条。
对于table来说，假如table-layout属性设置为fixed，则td对象支持带有默认值为hidden的overflow属性。如果设为hidden，scroll或者auto，那么超出td尺寸的内容将被剪切。如果设为visible，将导致额外的文本溢出到右边或左边（视direction属性设置而定）的单元格。
自IE5开始，此属性在MAC平台上可用。
对应的脚本特性为overflow。请参阅我编写的其他书目。
还有一个属性就是text-overflow这属性设为ellipsis时,会自动加省略号, 但只IE6支持
看来问题解决了,根据上面的属性很容易就能写出下面的代码....
大家可以拷贝到记事本里保存成htm文件测试....
<span style="width:160px;height:15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap">测试字符串
的所处位置没测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试长度宽度</span>
再加一个title当鼠标移上去时把全文显示出来就prefect了,示例见www.ylog.net的首页
CSS2.0中文手册可以在此下载http://www.ylog.net/download.asp?cat_id=7
……