超出以省略号显示，是我们写CSS时经常遇到的问题，分单行和多行两种情况

单行超出省略号

需要设置4个属性

width: 宽度固定

overflow：设置为hidden，超出父元素宽度则隐藏

text-overflow: 设为ellipsis，即显示省略符号来代表被修剪的文本

white-space: 设为nowrap，即不允许换行

通过设置这几个，即不允许换行，超出又不显示，以省略号代替修剪文本，即可达到我们要的效果

<style type="text/css">
   .test{
       width: 100px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
   }
</style>

<p class="test">测试超出省略号,文字必须够长,要不然怎么超出呢</p>

多行超出省略号

核心代码如下

<style type="text/css">
   .test{
       width: 100px;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 3;
       overflow: hidden;
   }
</style>

<p class="test">测试超出省略号,文字必须够长,要不然怎么超出呢</p>

可通过修改-webkit-line-clamp的值，来控制最多显示几行