天极传媒:
天极网
比特网
IT专家网
52PK游戏网
极客修
全国分站

北京上海广州深港南京福建沈阳成都杭州西安长春重庆大庆合肥惠州青岛郑州泰州厦门淄博天津无锡哈尔滨

产品
  • 网页
  • 产品
  • 图片
  • 报价
  • 下载
全高清投影机 净化器 4K电视曲面电视小家电滚筒洗衣机
您现在的位置: 天极网 > 软件 > 网页>技术文档>网页设计应用:使用CSS截字

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

realazy's blog2006-07-03 15:38我要吐槽

  截字是一个很恶心的问题。为了照顾表现上的需要,通常需要把过长的句子,比如一个列表中的新闻标题,截短。

  通常这由程序员使用后台技术(各种流行的语言,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教程专区
作者:龙犊责任编辑:龙犊)
请关注天极网天极新媒体 最酷科技资讯
扫码赢大奖
评论
* 网友发言均非本站立场,本站不在评论栏推荐任何网店、经销商,谨防上当受骗!
热点推荐
微软Windows 10操作系统Win10系统在Win8的基础上对界面、特性以及跨平台方面做了诸多优化。[详细]
Windows 10 新视界 [进入频道][使用技巧][微博互动]
手机整机DIY企业级