首页 > Web开发 > 详细

css多行省略和单行省略

时间:2020-02-16 15:21:15      阅读:79      评论:0      收藏:0      [点我收藏+]

实现文本省略:

<!-- html代码 -->

<p class="single">该文的主题思想即对自由境界的向往。朱自清当时虽置身在污浊黑暗的旧中国,但他的心灵世界则是一片澄澈明净,他的精神依然昂奋向上。朱自清把他健康高尚的审美情趣,把他对美好事物的无限热爱,将他对人生理想的不懈追求熔铸到文章中去。熔铸到诗一样美丽的语言中去。从而使整篇文章洋溢着浓浓的诗意,产生了经久不衰的艺术魅力<p>

/*css代码*/
/*单行*/
.single{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;    
}

/*多行*/
.single{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient:vertical;
     flex-direction: column;
}
    

注意:如果想实现三行省略可以修改属性 -webkit-line-clamp:3

 

 

实现效效果:

技术分享图片

css多行省略和单行省略

原文:https://www.cnblogs.com/shanchui/p/12316712.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!