问题
多行文本溢出隐藏,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' } })