css设置文本超过宽度后显示省略号点点点#yyds干货盘点#

Posted 2022-01-17 前端老实人

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

单行文本显示省略号

.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	使用给定的字符串来代表被修剪的文本。