css实现标题缩略显示方法
作者:吕海鹏 文章来源:IT学习网原创 发表时间:2007-10-31 23:09:56
阅读次数:今日:1 本周:4 本月:20 总计:4199
今天 有朋友说起了应用css样式来实现文章标题多出的截去以省略号代替的方法(说来惭愧这方法早知道可竟然没仔细了解),看到演示,如梦方醒,以后再也不费力气用程序来截去多余字串了...
这个方法很简单主要就是应用 css中的text-overflow:ellipsis实现:

首先我们来看看text-overflow的语法: 


语法: text-overflow : clip | ellipsis 

参数: 
clip :  不显示省略标记(...),而是简单的裁切 
ellipsis :  当对象内文本溢出时显示省略标记(...) 

说明: 

设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。 
注意,text-overflow:ellipsis属性在低版本的FF中是没有效果的。
同时应用: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 就实现了想要得到的溢出文本显示省略号效果:
示例代码如下:
<style type="text/css"> 
ul {width:300px; border:1px solid red;} 
li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} 
</style> 
<ul> 
    <li>SQLserver2000安装文件挂起错误的解决办法  
    <li>Web标准:改变您的网页制作思维方式 节省代码及结构与表现分离 
    <li>JS组件dtree轻松实现树型菜单 
    <li>jsp+session拼图游戏原理分析 
</ul> 

不 知道为什么text-overflow一直是一个不常用的样式,比起在后台用程序截断文本再附上省略标记的做法,用CSS来处理文本溢出显然更温和 (unobtrusive)一些,而且这样做对搜索引擎更加友好,。而且它已经被定义在CSS 3 规范中,
这种做法十分简单,你不用关心页面显示字体会怎么变,它只认宽度,因为这一切都由浏览器来进行渲染,浏览器当然最有发言权,它自然也就最清楚自己在做什么,相反当你还在后台甚至是还未显示时的JS中进行截字符串处理,前台展示仍存太多未知数。

    只是用css截断字符串这种方法浏览器兼容不好,此方法在IE6和IE7中显示是正确的,但在FIREFOX里达不到预期效果,仅显示被截的字串而没有“...”省略号。


关键字:css
最后编辑时间:2007-10-31 23:09:56
上一篇: js实现模态对话框
下一篇: flash CS3下实现鼠标事件响应链接url