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

之前写网页过程中当文字需要后台调用的时候会遇到很多客户喜欢上传成百上千个字(这个时候网页上就会出现密密麻麻的全是文字)

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

但是这样看上去很突兀,这时候我们就需要有更优质的体验的方法,使其结尾加上省略号代码如下

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

备注:第三行代码中你需要显示几行,此处的数字就应该写多少!

效果如下

但是此代码在火狐当中是不兼容的(并且溢出隐藏的属性都被覆盖),所以我们得记得在使用此代码的同时一定要给盒子或者标签设置高度,可以适当的解决火狐不兼容的问题(但是还是不会出现省略号)!


大漠里的那一片绿洲
原文地址:https://www.cnblogs.com/zmayan/p/10483942.html