“查看更多”功能，较完美的实现

大家好，欢迎来到IT知识分享网。

“查看更多”功能，较完美的实现

需求：

文本过多时隐藏文本，用省略号代替，省略号后面有“查看更多”的按钮。
点击“查看更多”后展开所有文本，如下图：

点击“收起”后恢复原状。
实现

<div class="box clearfix"> <div class="rt more"> <span>...</span> <a>查看更多</a> </div> <div class="text">测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi</div> <div class="rt retract"> <a>收起</a> </div> </div> 

.clearfix:after{ 
   content:".";display:block;height:0;clear:both;visibility:hidden} .box{ 
    box-sizing: border-box; padding-top: 75px; width: 100px; height: 100px; overflow: hidden; } .text{ 
    margin-top: -75px; font-size: 12px; line-height: 25px; word-wrap: break-word; white-space: normal; word-break: break-all; } .rt{ 
    float: right; font-size: 12px; line-height: 25px; } .rt a{ 
    color:red; cursor: pointer; } .ha{ 
    height: auto; } 

$(".rt a").click(function(){ 
    if($('.more').css("display")!=='none'){ 
    $(".box").addClass('ha') $('.more').hide() }else{ 
    $(".box").removeClass('ha') $('.more').show() } }); 

分析
1.“查看更多”按钮实际上是依靠浮动，实现了一个文字环绕的效果。（在文字前面设置浮动，则可以达到文字环绕的效果。当我们给“查看更多”按钮设置右浮动时，效果如下：）

而省略号代替省略文件的功能，实际上也是依靠文字环绕的效果模拟的。
2.“查看更多”按钮依靠浮动定位，只能定位到在文字的第一行，这时如果给“查看更多”按钮设置margin或者padding，会挤开文字。于是给.box 设置 padding-top：

再给.text设置margin-top：

即可达到效果。
/
*2020/09/29更新
/
更改：
新增了判断字数是否超出，以及是否显示查看更多的更能。

.clearfix:after{ 
   content:".";display:block;height:0;clear:both;visibility:hidden} .box{ 
    box-sizing: border-box; padding-top: 75px; width: 100px; height: 100px; overflow: hidden; } .text{ 
    margin-top: -75px; font-size: 12px; line-height: 25px; word-wrap: break-word; white-space: normal; word-break: break-all; } .rt{ 
    float: right; font-size: 12px; line-height: 25px; } .rt a{ 
    color:red; cursor: pointer; } .ha{ 
    height: auto; } .retract{ 
    display: none; } .my_more{ 
    display: none; } 

<div class="box clearfix"> <div class="rt more my_more"> <span>...</span> <a>查看更多</a> </div> <div class="text">测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi测试ceshi</div> <div class="rt retract my_more"> <a>收起</a> </div> </div> 

$(function(){ 
    $(".rt a").click(function(){ 
    if($('.more').css("display")!=='none'){ 
    $(".box").addClass('ha') $('.more').hide() $('.retract').show() }else{ 
    $(".box").removeClass('ha') $('.more').show() $('.retract').hide() } }); if($('.text').height()>$('.box').innerHeight()){ 
   //判断是否需要显示查看更多 $('.my_more').show() } }); 

效果：

刚好装满父容器时，不会显示查看更多。