超出文字隐藏，展开与收缩(参考至他人思想)

Html

Css


    课程简介
    
    
        此处是课程简介，字数在150字到300字，无配图此处是课程简介，字数在150字到300字，无配图此处是课程简介，字数在150字到300字，无配图此处是课程简介，字数在150字到300字，无配图此处是课程简介，字数在150字到300字，无配图此处是课程简介，字数在150字到300字，无配图此处是课程简介，字数在150字到300字，无配图此处是课程简介，字数在150字到300字，无配图此处是课程简介，字数在150字到300字，无配图此处是课程简介，字数在150字到300字，无配图此处是课程简介，字数在150字到300字，无配图此处是课程简介，字数在150字到300字，无配图此处是课程简介，字数在150字到300字，无配图此处是课程简介，字数在150字到300字，无配图此处是课程简介，字数在150字到300字，无配图此处是课程简介，字数在150字到300字，无配图此处是课程简介，字数在150字到300字，无配图此处是课程简介，字数在150字到300字，无配图此处是课程简介，字数在150字到300字，无配图此处是课程简介，字数在150字到300字，无配图此处是课程简介，字数在150字到300字，无配图此处是课程简介，字数在150字到300字，无配图此处是课程简介，字数在150字到300字，无配图此处是课程简介，字数在150字到300字，无配图此处是课程简介，字数在150字到300字，无配图此处是课程简介，字数在150字到300字，无配图此处是课程简介，字数在150字到300字，无配图此处是课程简介，字数在150字到300字，无配图此处是课程简介，字数在150字到300字，无配图此处是课程简介，字数在150字到300字，无配图此处是课程简介，字数在150字到300字，无配图此处是课程简介，
        >>>展开

.lisDetail_intro h4 {
	font-size:12px;
	color:#333;
	font-weight:600;
}
.intro_box {
	width:100%;
	font-size:14px;
	color:#333;
	opacity:0;
}
.intro_box .intro_con {
	display:block;
	overflow:hidden;
}
.intro_box .intro_btn {
	color:rgba(
	0,0,0,.3)
	float:right;
}

function textstr(obj, btn, initFontNum, initTextHeight) {

let didiText = $(obj).text()
    let didiHeight = $(obj).height();

if (didiText.length >= initFontNum && didiHeight > initTextHeight) {
        $(obj).text($(obj).text().substring(0, initFontNum))
        $(obj).html($(obj).html() + "......")
        $(btn).parent().css({
            "opacity": "1"
        })
        $(obj).css({
            "height": initTextHeight + "px"
        })

$(btn).click(function() {
            let curText = $(obj).text()
            if (curText.length == initFontNum + 6) {
                $(obj).css({
                    "height": didiHeight + "px",
                    '-moz-transition': '0.6s',
                    '-webkit-transition': '0.6s',
                    'transition': '0.6s'
                })
                $(btn).text("<<<收起")
                $(obj).text(didiText)

} else {
                $(obj).css({
                    "height": initTextHeight + "px",
                    '-moz-transition': '0.6s',
                    '-webkit-transition': '0.6s',
                    'transition': '0.6s'
                })
                $(btn).text(">>>展开")
                setTimeout(function() {
                    $(obj).text($(obj).text().substring(0, initFontNum))
                    $(obj).html($(obj).html() + "......")
                }, 500)
            }

})
    } else {
        $(btn).hide();
        $(btn).parent().css({
            "opacity": "1"
        })
    }
}
textstr(".intro_con", ".intro_btn", 150, 160);

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.4

立即下载

超出文字隐藏，展开与收缩(参考至他人思想)

代码描述：超出字体数，添加省略号，显示展开。展开全文，显示收起

前端菜鸟一只，有不对之处多多海涵在小弟这里，过渡很自然，不知为何在这里动画过渡很不自然时间仓促，先码字，没办法详细解说，网上很多参考示例// 超出文字隐藏，可展开收缩//
注： 1.需在文字层与点击标签外套个父元素，并opacity：0//
2.依次传入文字层的class，点击层的class，字数限制，最小高度(收缩后的高度)initfontnum ---- 初始化字数限制inittextheight --- 初始化高度diditext ----- 获取完整内容didiheight ---- 获取完整内容的高度

4

最新

发表评论全部评论

暂时没有评论！

骁湘夜雨0

2018/8/8 9:51:45

为什么下载之后不好使啊

西瓜0

2018/8/8 10:16:37

因为下载后.intro_box容器宽度是100%，打开网页所有文字可以放下，所以没有隐藏，设置代码13行width:50%;
.intro_box { width:50%; font-size:14px; color:#333; opacity:0; }

骁湘夜雨0

2018/8/8 18:06:32

ok

20?0

2019/11/14 16:32:07

不好意思，当时弄得比较草率，最近1年跳槽忙项目，没做修改优化。

回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

20?

相关代码

课程简介

超出文字隐藏，展开与收缩(参考至他人思想)

最新