解决文字溢出和兼容性问题的处理

以前写网页过程当中当文字须要后台调用的时候会遇到不少客户喜欢上传成百上千个字（这个时候网页上就会出现密密麻麻的全是文字）

固然其实很好解决咱们只要在编码过程当中养成良好给div或者p标签一个高，而后给一个overflow: hidden;溢出隐藏就行了这个时候就是如图的效果

可是这样看上去很突兀，这时候咱们就须要有更优质的体验的方法，使其结尾加上省略号代码以下

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;

备注：第三行代码中你须要显示几行，此处的数字就应该写多少！

效果以下

可是此代码在火狐当中是不兼容的（而且溢出隐藏的属性都被覆盖），因此咱们得记得在使用此代码的同时必定要给盒子或者标签设置高度，能够适当的解决火狐不兼容的问题（可是仍是不会出现省略号）！