HTMl控制单行长度 省略多余文字 text-overflow使用方法
通常情况下将一个过长的标题显示到一行内,我们会用程序截取某几个字,这样不能保证这一行文字的长度一致。因为中国汉字与阿拉数字或是英文字母宽度不一致呀。
如果您喜欢这种方法来控制一行文字的长度,可以参考我的这篇两篇日志:
下面再介绍一种比这个简单的办法,就是用Css的text-overflow方法来实现。这种控制单行长度的方法就不再细说,详看下面这个例子就是。
Css text-overflow使用方法代码如下:
<style type="text/css">
#ttoo{margin:10px;border:1px solid #e00;}
#ttoo li{width:300px;line-height:25px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
</style>
<ul id="ttoo">
<li><a href="http://www.yaocai123.com/">中药材百科 中国最大的中药材、中药种植、中药配方的网站</a></li>
<li><a href="http://www.yaocai123.com/zhongzhi/">中药种植技术,中药材、中草药栽培技术平台!</a></li>
<li><a href="http://www.xgto.cn">淘宝网手机商城,淘宝网网上购物手机导购!</a></li>
<li><a href="http://www.dy03.cn">第3电影网:优酷网在线看电影,免费在优酷网看电影!</a></li>
</ul>
看一下效果吧:
