单行文本和多行文本溢出处理

每次遇到这个问题都是百度出来的，由此也就产生了惰性，心理上不去记这几行代码，导致每次用的时候都不记得是哪几个属性。

索性这里做个笔记吧！下次可以在我的博客里面看

如下：

1.单行文本溢出

单行文本溢出显示...

overflow: hidden;
text-overflow: ellipsis;  /* 溢出显示... */
white-space: nowrap;  /* 不换行 */

 

overflow 还有一些其他属性值，可以根据需要进行调整，如scroll显示进度条等； text-overflow 属性相应做出改变

 

 

2.多行文本溢出

 

多行文本溢出显示...

 150px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;   /* 行数 */
overflow: hidden;