文本溢出显示

什么是溢出显示

当输入的文本超出了元素的宽度或者高度的时候，此时，就是文本溢出。文本溢出我分为两大类，一类，高度的溢出显示，另一类，宽度的溢出显示。

高度溢出显示

首先是没有固定的高度，元素的高度就是文本的高度，但是文本太高也不是很美观，给一个最大高度，文本溢出显示滚动条。

.box{width:200px;max-height:100px;overflow-y:auto;}

其次是有固定高度，超出元素告诉，显示滚动条

.box{width:200px;height:100px;overflow-y:auto;}

宽度溢出显示

滚动条显示

.box{width:200px;height:200px;overflow-x:auto}// 固定宽度

.box{max-width:200px;height:200px;overflow-x:auto}//没有固定宽度

溢出显示省略号（一行）

.box{width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

溢出显示省略号（多行）

.box{width:100px,display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}

注意，该方法适用于Webkit浏览器及移动端。

注释：

（1）-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：

（2）display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。

（3）-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

作者：超爱吃小龙虾
链接：https://www.jianshu.com/p/2dc6d6929292