网页设计应用:使用CSS截字
2008-04-30 18:40
274 查看
截字是一个很恶心的问题。为了照顾表现上的需要,通常需要把过长的句子,比如一个列表中的新闻标题,截短。
通常这由程序员使用后台技术(各种流行的语言,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实现。
具体过程不说了,看案例,有兴趣者看看源码,很容易理解的。
通常这由程序员使用后台技术(各种流行的语言,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实现。
具体过程不说了,看案例,有兴趣者看看源码,很容易理解的。
相关文章推荐
- 使用框架和滑动门技术进行网页设计
- 手机网页应用的交互设计
- 35个创意网页缩略图应用设计案例
- 经典网页设计:应用四边形的16个超酷的国外网站
- [置顶] 设计模式-单例模式(Singleton)在Android中的应用场景和实际使用遇到的问题
- 经典网页设计:应用四边形的16个超酷的国外网站
- 基于CSS的DIV网页设计 - 使用固定层方法设计网页
- 水彩在网页设计中应用的15个优秀案例
- Flex技术在企业级开发中的应用-网页设计
- 经典网页设计:25个应用视差滚动的单页网站
- 幻灯片带网页设计中的20个奇妙应用示例小结
- 使用Yeoman搭建 AngularJS 应用 (8) —— 让我们搭建一个网页应用
- 使用Yeoman搭建 AngularJS 应用 (10) —— 让我们搭建一个网页应用
- 让用户使用我设计的网页字体
- 谈谈网页设计中的字体应用Font Set
- 【转】谈谈网页设计中的字体应用 (1) Font Set
- 在网页设计中使用纹理传递氛围——附完美案例
- 网页设计对图片的选择应用
- 使用美丽景观照片的大背景网页设计
- 使用qdbusxml2cpp工具简化你的QtDBus应用设计