把字符串放到规定的范围内,超出的部分自动变为...完美解决

80酷酷网    80kuku.com

  解决|字符串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

分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: