收藏本站 
广告服务 
网站地图 
>> 本频道近100000余篇各类电脑技术、网络技术、软件技术、网页及平面设计等方面的电脑教程,我们的原则:不是精华拒不收录!
先飞电脑技术网技术文章网络编程CSS/HTML
网络编程 | 网站建设 | 网络技术 | 设计教程 | 软件教学 | 程序开发 | 数据库开发 | 教育认证 | 硬件维护 | 媒体动画 | 机械电子 |

网页设计中使用CSS截取字符串

[ 作者:佚名    转贴自:网络转载    阅读次数:39    更新时间:2007-9-19 11:53:00   录入:刘光勇 ]        
    截取字符串是一个很麻烦的问题。为了照顾表现上的需要,通常需要把过长的句子,比如一个列表中的新闻标题,截短。

  通常这由程序员使用后台技术(各种流行的语言,PHP, JSP等)或者前台技术(javascript)来处理。我个人倾向于使用前台技术,因为这对提高网页的亲和力(accessibility)有好处。在非桌面型的浏览器中,用户可以更方便的掌握信息完整性。

  text-overflow是CSS3的一个性质(property),它可以截短过长的字符串,并依据值(value)来决定被截掉部分使用何种方式展现。目前,IE已经实现对其的支持,Opera也有了私有属性(-o-text-overflow)对其支持,Firefox似乎落后一步……支持的两者都可使用ellipsis 值,把截掉部分替代成省略号(即ellipsis)。

  所以,你要做的只是,把需要截字的元素定好宽度,和overflow一起使用,即可实现效果。

  但是Firefox不支持,所以大概你知道我下面要干什么了。 :)

  先可以看看Yahoo某大牛的解决方案:http://blog.360.yahoo.com/blog-ktYYK_s5fqJ2Hu1ryv2QSL0-?p=120。大牛就是大牛,XBL和javascript双管齐下。

  然后,我的解决方案是,利用伪类:after增加省略号,再把它定位到右边即可。效果有点粗糙,但简洁明了,纯CSS实现。

  具体过程不说了,看案例,有兴趣者看看源码,很容易理解的。

文章首页【加入到收藏夹】告诉好友】【打印此文】【关闭窗口
  版权声明:本站提供的“网页设计中使用CSS截取字符串”版权归文章所有者,转载请注明出处!
 ·上一篇文章:CSS应用常见问题大总结      ·下一篇文章:网页设计中的CSS使用技巧20则
相关文章
·5种存于网页中的隐形病毒详解[83]
·教你识别和防御Web网页木马[76]
·CSS网页中文排版心得9则[88]
·网页设计中的CSS使用技巧20则[37]
·网页设计中使用CSS截取字符串[39]
网站主页 | 收藏本页 | 联系我们 | 广告服务 | 站点地图 | 会员注册 | 招聘信息 | 内容指正

联系QQ:先飞电脑技术网站事务联系QQ,点击可以直接留言. 32933427 电话:13710542091 [世界排名] 鄂ICP备05005890号 先飞电脑教程网