首页 > 代码库 > 折叠多余文本内容，点击查看更多

折叠多余文本内容，点击查看更多

2024-08-11 12:05:10   220人阅读

command:设定规定的行数，当文本内容超过时，折叠并有一个“查看更多”的按钮

step1:编写html......

<p statue="0" class="text close_text"> //status是自定义的属性，“0”是false，“1”为Truetexttexttextvvshjhhsbcnxgfggggkshjahcjbkjciwhiuheohbcjkbcnzlkxkjidjoieklkxm.,cxzmkcowdjijdpoweofjibvjksnvkowdohoblzxocwioueoifblkxnkjd</p>
<div class="show_more"> //设定“查看更多”的按钮
　　<a href="" class="show_more_btn">查看更多</a>
</div>
......

step2:设定样式css

.close_text{    display: -webkit-box;    -webkit-box-orient: vertical;//当文本内容超过两行时，会显示省略号    -webkit-line-clamp: 2;//显示行数    word-break: break-all;//自动换行    overflow: hidden;//＃＃隐藏多出的文本}.show_more{    width:100%;    text-align:right;}.show_more a{    text-decoration:none;    font-family:SimSun;    font-size:12px;    color:#231815;}

step3:用jQuery编写效果

<script>$(function(){    $(".show_more_btn").click(function(){　　　　var status=$(".text").attr("status");　　　　if(status="1"){　　　　　　overflow:hidden;　　　　　　$(".text").addClass(".close_text");　　　　　　$(".text").attr("status",0);　　　　　　$(this).html("查看更多");　　　　}else{　　　　　　$(".text").removeClass(".close_text");　　　　　　$(".text").attr("status",1);　　　　　　$(this).html("收起")　　　　}　　　　return false;　　})})</script>

 

折叠多余文本内容，点击查看更多


联系
我们