搜索
  • 您还未登录,请
  • 查看: 811|回复: 0
    打印 上一主题 下一主题
    收起左侧

    网页设计应用:使用CSS截字

    [复制链接]
    • 形象
    • 资料
    • 荣誉
    CooL.叼酷  男性
    发短消息 加为好友

    QQ
    UID: 8751
    帖子: 194
    精华: 2
       积分: 1663
       威望: 81
       状态: 0
       积极: 459
       贡献: 20
       魅力: 20
       活跃: 559
       人气: 303
       酷币: 136
       阅读权限:70
       注册时间:2012-4-9
       在线时长:37小时
       失踪天数: 4565 天
       社区经验: 03级 已经发了194篇文章咯快4级咯
       在线状态:   
    级别: 『社区成长』LV.5

    该用户从未签到

    升级   33.15%

    荣誉勋章

    社区QQ达人 超级无敌新人奖 优秀成员 空间认证奖 YY认证勋章 幸福恋人奖(男) 酷Q帅哥奖 巨蟹座
    跳转到指定楼层
    楼主
    CooL.叼酷 发表于 2012-4-14 07:19:16 | 只看该作者 回帖奖励 |正序浏览 |阅读模式         
    +1
    811°C
    沙发哦 ^ ^ 马上

    马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

    您需要 登录 才可以下载或查看,没有帐号?会员注册

    x
    截字是一个很恶心的问题。为了照顾表现上的需要,通常需要把过长的句子,比如一个列表中的新闻标题,截短。   通常这由程序员使用后台技术(各种流行的语言,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实现。   具体过程不说了,看案例,有兴趣者看看源码,很容易理解的。
    --------------------------------------------------------------------------------------------------
        本文来自 叼酷  如果你也爱QQ 爱文字 爱生活 爱技术 爱酷族
         QQ空间地址:http://user.qzone.qq.com/2500497226
          新浪微博: D浩涵
          空间互踩群:221776610

        【 请加我QQ:2500497226,我们都 爱生活 爱文字 爱技术 爱酷族】
    CooL.叼酷说:
    分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    收藏收藏 转播转播 分享分享 分享淘帖 支持支持 反对反对
    您还没有设置个性签名O(∩_∩)O~

    发表回复

    您需要登录后才可以回帖 登录 | 会员注册

    本版积分规则

    欢迎您的光临,如果您觉得本站做得不错的话,请把本站介绍给您的好友,谢谢大家的支持!
    发布主题 上个主题 下个主题 快速回复 收藏帖子 返回列表

    ©2009-2025 时尚酷族社区 http://www.coqq.net/  版权所有 
      

    快速回复 返回顶部 返回列表