把字符串放到规定的范围内,超出的部分自动变为"..."完美解决
作者：袖梨
2022-06-30
ylog.net主页里有最新日记和最新评论两项,日记的标题和评论的内容经常超出长度而自动换行,只能用难看两字形容,这让我头痛不已...
首先想到的是截取一段,于是写了这个函数
这种操作用js,在客户端执行可以缓解服务器负担,而且js在操作字符串时有速度优势
结果可想而知,因为英文和中文的打印长度不同,得到的结果是长短不齐,显然不是我要的效果
既然中文的宽度大约为两倍的英文宽度,那就把中文当成两个英文字符了,然后再截取出来,再还原#@$#@%$#!$#
代码我就不贴了,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文件测试....
再加一个title当鼠标移上去时把全文显示出来就prefect了,示例见www.ylog.net的首页
CSS2.0中文手册可以在此下载http://www.ylog.net/download.asp?cat_id=7
首先想到的是截取一段,于是写了这个函数
这种操作用js,在客户端执行可以缓解服务器负担,而且js在操作字符串时有速度优势
结果可想而知,因为英文和中文的打印长度不同,得到的结果是长短不齐,显然不是我要的效果
既然中文的宽度大约为两倍的英文宽度,那就把中文当成两个英文字符了,然后再截取出来,再还原#@$#@%$#!$#
代码我就不贴了,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文件测试....
再加一个title当鼠标移上去时把全文显示出来就prefect了,示例见www.ylog.net的首页
CSS2.0中文手册可以在此下载http://www.ylog.net/download.asp?cat_id=7
