htmldiv实现多⾏⽂本,css3实现多⾏⽂字截断功能
单⾏⽂本截断 text-overflow
⽂本溢出我们经常⽤到的应该就是 text-overflow: ellipsis 了，相信⼤家也很熟悉，只需轻松⼏⾏代码就可以实现单⾏
如果是多⾏⽂字截取效果，实现起来就没有那么轻松。
-webkit-line-clamp 实现
先介绍第⼀种⽅式，就是通过 -webkit-line-clamp 属性实现。具体的⽅式如下：
它需要和 display、-webkit-box-orient 和 overflow 结合使⽤：
display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒⼦模型显⽰。
-webkit-box-orient; 必须结合的属性，设置或检索伸缩盒对象的⼦元素的排列⽅式
text-overflow: ellipsis; 可选属性，可以⽤来多⾏⽂本的情况下，⽤省略号“…”隐藏超出范围的⽂本。
从效果上来看，它的优点有：
响应式截断，根据不同宽度做出调整 ⽂本超出范围才显⽰省略号，否则不显⽰省略号 浏览器原⽣实现，所以省略号位置显⽰刚好
但是缺点也是很直接，因为 -webkit-line-clamp 是⼀个不规范的属性，它没有出现在 CSS 规范草案中。也就是说只有 webkit 内核的浏览器才⽀持这个属性，像 Firefox, IE 浏览器统统都不⽀持这个属性，浏览器兼容性不好。
使⽤场景：多⽤于移动端页⾯，因为移动设备浏览器更多是基于 webkit 内核，除了兼容性不好，实现截断的效果不错。
css特效文字定位元素实现多⾏⽂本截断
另外还有⼀种靠谱简单的做法就是设置相对定位的容器⾼度，⽤包含省略号(…)的元素模拟实现，实现⽅式如下：
float 特性实现多⾏⽂本截断

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。