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

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

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

如下:

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;