html代码:
<div class="lastline-space-ellipsis js-toggle-box" title="你让我只显示2行就只显示2行啊,你让我只显示2行就只显示2行啊,你让我只显示2行就只显示2行啊">
你让我只显示2行就只显示2行啊,你让我只显示2行就只显示2行啊,你让我只显示2行就只显示2行啊<!--这里的内容是为了撑开高度-->
</div>
以下以两行截取为例:
.lastline-space-ellipsis{
position: relative;
max-height:40px;/*用像素表示,不要用em,以免造成不同浏览器下计算出现小数点取舍不同导致1像素的差距【行高*截取行数】*/
overflow: hidden;
word-wrap: break-word;
word-break: break-all;/*强制打散字符*/
line-height:20px;
color:#fff;/*同背景色*/
}
.lastline-space-ellipsis::before,.lastline-space-ellipsis::after{
position: absolute;
left: 0;
top: 0;
width: 100%;
color: #333;/*实际文本颜色*/
content: attr(title);
}
.lastline-space-ellipsis::before{
display: block;
z-index: 1;/*显示在最上面,展示前面的(截取行数-1)行字符*/
max-height: 20px;/*根据行高和截取行数调整,值为[(截取行数-1)*行高]*/
overflow: hidden;
background-color: #fff;/*同背景色*/
}
.lastline-space-ellipsis::after{
display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-webkit-line-clamp:2;/*截取行数*/
text-indent: -3em;/*行首缩进字符数,值为[-(截取行数-1)*尾部留空字符数],取负值把每行多padding-right的部分给缩进回去*/
padding-right: 3em;/*尾部留空字符数*/
}
这样就完成了尾部留空并且做了截取了,title属性值里可根据实际情况做下截取减少些文本量,如果要展现全部内容,只需把.lastline-space-ellipsis的类名去除即可。
另外要实现右侧的箭头控制则需要多做一层嵌套。
<div class="lastline-space-ellipsis js-toggle-box" title="你让我只显示2行就只显示2行啊,你让我只显示2行就只显示2行啊,你让我只显示2行就只显示2行啊">
<div class="expand-box">
你让我只显示2行就只显示2行啊,你让我只显示2行就只显示2行啊,你让我只显示2行就只显示2行啊
<i class="icon-toggle"></i>
</div>
</div>
另外针对inner标签所做的css如下:
.lastline-space-ellipsis .expand-box{
max-height:60px;/*(截取行数+1)*行高*/
position:relative;
}
.lastline-space-ellipsis .icon-toggle{
background:url(url) no-repeat;
background-size:cover;
width:10px;
height:10px;
position:absolute;
bottom:20px;/*使用固定定位,在没超出高度的情况下,会被before伪元素给挡住,这样就不会显示该按钮了*/
right:0;
}
要判断是否折叠,判断一下.lastline-space-ellipsis的高度和.expand-box的高度是否相等就好了。
$('.js-toggle-box').on('click',function(){
var wrap = $(this),
inner = $('.expand-box',wrap),
wrapHeight = wrap.height(),
innerHeight = inner.height();
if(wrapHeight > innerHeight && wrap.hasClass('lastline-space-ellipsis')){
wrap.removeClass('lastline-space-ellipsis');
}else if(wrapHeight == innerHeight && !wrap.hasClass('lastline-space-ellipsis')){
wrap.addClass('lastline-space-ellipsis');
}
});
扫码关注w3ctech微信公众号
非常赞的技巧!很感谢分享
您好。 js的代码中,是不是有错误?是否应该改为: if(wrapHeight < innerHeight && wrap.hasClass('lastline-space-ellipsis')){ 判断.js-toggle-box的高度是否小于.expand-box的高度,然后去除.lastline-space-ellipsis类名。
思想非常好,佩服
共收到3条回复