设为首页
加入收藏
站内地图
旧版入口
当前位置:首页 > 站长学院 > 网页制作 > CSS

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

作者:realazy 出处:realazy‘s blog 时间:09-11 点击:

内容载入中...

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

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

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

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

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

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

收藏本文:
】【打印页面】【推荐给朋友】【关闭窗口
推荐信息