保定网站建设,网站推广,网站优化服务,保定专业的PHP网站制作机构!

HTML控制单行长度 省略多余文字 text-overflow使用方法

发表于:2009年10月17日 11时  作者:dx_andy

通常情况下将一个过长的标题显示到一行内,我们会用程序截取某几个字,这样不能保证这一行文字的长度一致。因为中国汉字与阿拉数字或是英文字母宽度不一致呀。

如果您喜欢这种方法来控制一行文字的长度,可以参考我的这篇两篇日志:

下面再介绍一种比这个简单的办法,就是用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>

看一下效果吧:

 订阅“PHPLAMP博客”方便及时获取网站内容

PHPLAMP博客是专注于网站建设,搜索引擎研究,网站推广,网站优化的IT博客。

有关, , 的相关文章:

发表一下您对本文的意见