发新话题
打印

使用js和css处理文本截断与显示

使用js和css处理文本截断与显示

文本截断部分html:
代码:
<p class="text-slice">
三思屋社区始建于2006年2月,至今已有不少年岁。在这里大家相聚一堂,其乐融融。这里没有大型商业站点的紧迫感,我们追求的是那些纯真的氛围。小站承载了那些校园的回忆,和三思屋一起走过的朋友们,曾记得那些一起走过的学生时代,满社区的追着跑着嬉笑怒骂。而新来的朋友们,都兴致勃勃的研究着这里的新鲜玩意,愉快地度过每一天。最后顺便鄙视一些路过从不发言的潜水员,仅仅闪一下就再也找不着了。
</p>
<label class="expand-more">更多</label>
文本阶段部分css:
代码:
.text-slice {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
}
【更多】按钮点击显示更多部分js:
代码:
<script>
        $(function() {
                var $para = $('.content');
                var $more = $('.expand-more');
                $more.on('click', function() {
                        $para.toggleClass('text-slice');
                        if ($para.hasClass('text-slice')) {
                                $more.html('更多');
                        } else {
                                $more.html('收起');
                        }
                });
        });
</script>
判断是否显示【更多】按钮部分js:
代码:
// 文本是否发生截断
function hasTextSliced($ele) {
        var initHeight = $ele.height();
        var height;
        $ele.removeClass('text-slice'); // 删除截断样式
        height = $ele.height();

        if (initHeight < height) {
                // 发生截断
                return true;
        }

        return false;
}
本内容部分或全部来源于这里,著作权归原作者所有,如有问题请联系我们处理。

TOP

发新话题