问题
多行文本溢出隐藏，webkit内核浏览器如谷歌支持如下写法：
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
而其他内核不支持，如IE和火狐，故用JS做兼容
思路
获取目标文本行高line-height，内容高度offsetHeight
假设 x 行文本溢出隐藏
内容高度除以行高大于x，则加上溢出隐藏的css类名
效果图
html代码
<div class="textBox"> <div class="text texter">我是时代的残党，新世界没有载我的船。我是时代的残党，新世界没有载我的船。</div> </div> <div class="textBox"> <div class="text texter">我是时代的残党，新世界没有载我的船。我是时代的残党，新世界没有载我的船。</div> </div> <div class="textBox"> <div class="text texter">我是时代的残党，新世界没有载我的船。我是时代的残党</div> </div> <div class="textBox"> <div class="text texter">我是时代的残党，新世界没有载我的船。我是时代的残党</div> </div>
css代码
textBox{ padding:10px; margin-bottom:40px; width:14em; border:1px dashed #000000; } .text{ line-height:14px; font-size:14px; overflow:hidden; position:relative; } .texter{ height:28px; } .texter:after{ content: ' ... ', position:absolute; bottom:0; right:0; padding-left:10px; background: -webkit-linear-gradient(left,transparent, #fff 40%); /* Safari 5.1-6.0 */ background: -o-linear-gradient(left, #fff 50%); /* Opera 11.1-12.0 */ background: -moz-linear-gradient(left, #fff 50%); /* Firefox 3.6-15 */ background: linear-gradient(); /* 标准语法 */ }
JS代码
var oList = document.querySelectorAll('.text'); oList.forEach(function(item){ var oHeight = item.offsetHeight; if((oHeight/14)>2){ item.className = 'text texter' } })
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/159681.html
