前端

CSS3让文字显示两行及多行，其余隐藏显示省略号，并垂直居中且容器等比缩放

时间：2020-02-17 11:32:32 来源：chqqws.com 作者：陈清泉

简介：排版时我们经常需要将一大段文字只显示两行或多行，其余隐藏并加省略号和垂直居中。本文列出的这种方法需浏览器支持CSS3属性，老浏览器不兼容。顺带写了一下padding方法的等比缩放，这个主流浏览器都支持

文字两行显示溢出隐藏并加省略号且垂直居中效果图如上：

等比缩放效果图如上：

HTML：
<div>
   <span>测试DEMO测试DEMO测试DEMO测试DEMO测试DEMO测试DEMO测试DEMO测试DEMO测试DEMO测试DEMO测试DEMO测试DEMO测试DEMO测试DEMO测试DEMO测试DEMO测试DEMO测试DEMO<span>
</div>

CSS：
<style>
div{background-color:#999;position:relative;
   /*以下为等比缩放部分*/
   overflow:hidden;
   width:40%;
   height:0px; /*防止高度被撑开*/
   padding-bottom:40%;/*padding的百分比是根据父级宽度决定的*/
   }
span{width:80%;padding:0 10%;overflow:hidden;color:#FFF;font-size:16px;line-height:20px;text-align:justify;
   /*以下为垂直居中部分，需浏览器支持css3属性*/
   position:absolute;
   left:0;
   top:50%;
   transform: translateY(-50%);
   /*以下为显示两行并溢出显示...部分，需浏览器支持css3属性*/
   display: -webkit-box;
word-break:break-all; /*必要属性，看到很多教程因没有这一属性导致不成功*/
-webkit-line-clamp: 2;/*数值可随意更换，如：想显示两行是2，想显示5行就写5*/
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
   }
</style>