css设置文本超过宽度后显示省略号点点点这个属性用的贼多，我还老是忘，今天记录一下单行文本显示省略号多行文本超出显示

这个属性用的贼多，我还老是忘，今天记录一下

单行文本显示省略号

.a{
   overflow:hidden; /*超出的部分隐藏起来。*/ 
   white-space:nowrap;/*不让文本换行,在一行显示*/
   text-overflow:ellipsis;/*超出显示...*/
}

多行文本超出显示省略号

-webkit-是webkit内核的前缀（Chrome）


 .a{
    overflow: hidden;
 
    text-overflow: ellipsis;
 
    display: -webkit-box;/*将对象作为弹性伸缩盒子模型显示*/
 
    -webkit-line-clamp:2 ;/*限制在块元素文本的行数，它需要组合其他的WebKit属性*/
 
    -webkit-box-orient:vertical;/*设置盒子的子元素的排列方式*/
}

最后补充：

在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器），可以直接使用WebKit的CSS扩展属性

text-overflow：设置文字溢出之后的效果

值	描述
clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。