JAVA高级面试进阶训练营视频教程

admin

1.普通单行截断省略

overflow:hidden; 文字长度超出限定宽度，则隐藏超出的内容） text-overflow:ellipsis;（设置文字在一行显示，不能换行） white-space:no-wrap;（规定当文本溢出时，显示省略符号来代表被修剪的文本） 

这个方法的优点：

无兼容问题
响应式截断
文本溢出范围才显示省略号，否则不显示省略号
省略号位置显示刚好
缺点：
只支持单行文本截断

2.多行截断省略

-webkit-line-clamp: 2;(用来限制在一个块元素显示的文本的行数, 2 表示最多显示 2 行) display: -webkit-box; -webkit-box-orient: vertica; overflow: hidden; text-overflow: ellipsis; 

这个方法的兼容性一般

出处链接：https://www.jianshu.com/p/5a0943faf7aa

 

溢出插件：

• clamp.js
• jQuery.dotdotdot