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

郑绮梦迎

郑绮梦迎

2016-02-19 17:26

下面图老师小编跟大家分享网页设计应用:使用CSS截字,一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~

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

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

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

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

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

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

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

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

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

Web开发
网页设计应用:使用CSS截字

网页设计中谨慎使用CSS sprites

Web开发
网页设计中谨慎使用CSS sprites

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS设计制作网页不要使用@import

Web开发
CSS设计制作网页不要使用@import

网页文字应用CSS设计的一些技巧

Web开发
网页文字应用CSS设计的一些技巧

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

可用CSS3实现的常见网页设计应用

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
可用CSS3实现的常见网页设计应用

标记语言——网页应用CSS样式

Web开发
标记语言——网页应用CSS样式

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

CSS网页调试必备:让IE7与IE8共存

CSS网页调试必备:让IE7与IE8共存

CSS+DIV设计实例:超酷的竖排导航栏

CSS+DIV设计实例:超酷的竖排导航栏
下拉加载更多内容 ↓