关注前端开发
关注用户体验

CSS实现单行、多行文本溢出显示省略号(…)

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。

实现方法:

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

效果如图:
dome1

但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。

接下来重点说一说多行文本溢出显示省略号,如下。

实现方法:

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

效果如图:
dome2

适用范围:
因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;

注:

  1. -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
  2. display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
  3. -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

实现方法:

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}

效果如图:
dome3
适用范围:
该方法适用范围广,但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

注:

  1. 将height设置为line-height的整数倍,防止超出的文字露出。
  2. 给p::after添加渐变背景可避免文字只显示一半。
  3. 由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:<span>…<span/>);兼容ie8需要将::after替换成:after。
赞(307)
未经允许不得转载:大前端 » CSS实现单行、多行文本溢出显示省略号(…)
分享到: 更多 (0)

评论 29

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #26

    Some genuinely quality articles on this website , bookmarked .

  2. #25

    Thanks fo info, very helpfull

  3. #24

    This web site definitely has aall the information and facts I wanted concerning this subject and didn’t know who to ask.

  4. #23

    What theme is this? Love it!

  5. #22

    Greetings! Very helpful advice within this article! It is the little
    changes that produce the most significant
    changes. Many thanks for sharing!

  6. #21

    Thanks, very helpfull

    MASZUD2周前 (06-07)回复
  7. #20

    IPHONE XS free

    Shattuck4周前 (05-21)回复
  8. #19

    Yangın kapısı denince akla ilk reddoor Yangın Çıkış Kapıları Gelmektedir. sizi web sitemize beklerim. Yangın Merdiveni Kapısı İstanbul Bahçelievler Yangın Çıkış Kapısı

    Yangin Kapisi1个月前 (05-17)回复
  9. #18

    Howdy, i scan your blog occasionally and that i own a similar one and i was simply wondering if you get plenty of spam comments? If therefore how do you forestall it, any plugin or something you’ll be able to advise? i buy such a lot lately its driving me mad therefore any assistance is very much appreciated.

  10. #17

    Can I just say what a reduction to search out somebody who really is aware of what theyre speaking about on the internet. You undoubtedly know how one can carry an issue to light and make it important. Extra people must read this and perceive this aspect of the story. I cant imagine youre not more popular because you definitely have the gift.

    Myrta Gittinger1个月前 (05-17)回复
  11. #16

    Oh my goodness! an incredible article dude. Thanks a lot Nevertheless I’m experiencing problem with ur rss . Don’t know why Cannot subscribe to it. Can there be everyone finding identical rss dilemma? Anyone who knows kindly respond. Thnkx

    interesujacy wpis1个月前 (05-15)回复
  12. #15

    J’ai la possibilité de transférer les sites pour de nouvelles de miniatures sur cet idée. Contactez moi ici meme?

    Nonton Anime1个月前 (05-10)回复
  13. #14

    Very great post. I simply stumbled upon your weblog and wanted to say that I’ve truly enjoyed surfing around your weblog posts. In any case I will be subscribing for your rss feed and I hope you write once more very soon!

    cat products1个月前 (05-09)回复
  14. #13

    火狐的浏览器不兼容要怎么解决呢

    微笑死神2个月前 (04-26)回复
  15. #12

    mark一下,顺便贴一下webpack里编译后样式丢失的解决办法:
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */

    kiccer2个月前 (04-25)回复
    • 补充:
      /*! autoprefixer: ignore next */
      -webkit-box-orient: vertical;

      kiccer1个月前 (05-17)回复
  16. #11

    freight forwarder for amazon – freight forwarder china – freight forwarder buffalo ny – freight forwarder process – freight forwarder vs customs broker

  17. #10

    Having read this I believed it was really enlightening. I appreciate you taking the time and energy to put this informative article together. I once again find myself spending a lot of time both reading and posting comments. But so what, it was still worth it!

    DMC52个月前 (04-21)回复
  18. #9

    That is a good tip especially to those new to the blogosphere. Simple but very precise info… Appreciate your sharing this one. A must read post!

    DMC52个月前 (04-19)回复
  19. #8

    Hello! I would wish to give a enormous thumbs up to the wonderful information you may have here about this post. I will be returning to your blog site to get more detailed soon.

    Graig Merow2个月前 (04-08)回复
  20. #7

    I am impressed with this web site , really I am a big fan .

    my singing monsters3个月前 (03-28)回复
  21. #6

    hi, I’m ranking the crap out of “free justin bieber stuff”.

    Maria Gerdiman3个月前 (03-11)回复
  22. #5

    不错,以前这样过用

    鹏仔的共享博客9个月前 (09-17)回复
  23. #4

    谢谢

    王不留行1年前 (2018-06-05)回复
  24. #3

    你好,写得很好,我可以转载吗?

    晴不知所起2年前 (2017-07-17)回复
    • 可以的小伙子,加油!

      websong1年前 (2018-04-10)回复
  25. #2

    多行的根本不行,content明显是要硬塞一个省略符,对于一行中字数并不足一整行的情况下,句末依然会出现省略号,所以此法鸡肋。

    kerwin2年前 (2017-05-29)回复
    • 亲测可用、

      王豪2年前 (2017-08-16)回复
  26. #1

    亲测可用、

    tolerious2年前 (2017-02-16)回复

themebetter 国内更好的WordPress主题服务商

立即前往