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

需求：

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

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

<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()}
});

效果：

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

“查看更多”功能，较完美的实现相关推荐

php点击查看更多,微信小程序加载更多和点击查看更多功能介绍
这篇文章主要为大家详细介绍了微信小程序加载更多,点击查看更多功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序加载更多功能实现的具体代码,供大家参考,具体内容如下 ...
Vue简单的查看更多功能
Vue简单的查看更多功能循环的数据查看更多按钮
微信小程序——收起和查看更多功能
大概的需求就是默认只显示2条,点击[查看更多]显示全部,点击[收起]还原. 实现的方法千万种.我来讲一下我的实现思路: 1.先判断列表的长度,如果小于3就不要[查看更多]这个按钮了. 2.根据索引的大 ...
原生JS实现点击查看更多
评论区点击查看更多功能的实现思路: 对内容的高度进行判断,如果内容的高度大于设定的值,将内容的高度设定为固定值,同时将'查看更多'的节点上树.实现还是挺简单的,直接看代码. <!DOCTYPE ...
使用css实现 “查看更多” 的功能和样式
当文字过长时,我们通常使用省略号的形式限制行数,这种可实现大多数的情况. 但是,当我们要在文字超出时的末尾添加一个查看更多按钮,不超出时不显示此按钮, 单纯使用省略号的方式并不能实现,因为我们并不知道 ...
Android 仿美团网，探索使用ViewPager+GridView实现左右滑动查看更多分类的功能
不记得什么时候,我留意到到美团网首页有使用ViewPager+GridView实现左右滑动查看更多分类的一个功能,感觉它很有趣,于是想着自己动手也实现这样一个功能,和往常一样,主要是想总结一下我在学习 ...
加粉推广全能助手推广辅助工具好多粉微信号加粉复制统计工具加强版，加粉推广神器，持续完善升级，新增统计点击转化，页面插件功能，完美支持ocpc接口
最新一次版本是3.7版了,相比最开始的版本,新增了行为转化统计,落地页插件功能. 可能大家还不明白我们的这个系统有什么用了? 好吧,那就简单的介绍下,我们的系统可以给目前的加粉推广的提供最完善的数据统 ...
公众号滑动图代码_如何实现微信公众号文章“滑动查看更多”
喜欢我,就请点击上方蓝字添加关注吧! 方法一:微信编辑器自带的"插入代码"功能首先,写一段文字,然后选中文字,选择"插入代码"功能,完成微信编辑器插入代码功 ...
linux 加速播放软件,VirtualBox 6.1首次推出Linux 5.4支持，加速的视频播放及更多功能...
VirtualBox 6.1首次推出Linux 5.4支持,加速的视频播放及更多功能 Mark Do 2019年12月14日暂无评论阅读 7,329 次现在可以下载VirtualBox的主要更新 ...

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

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

“查看更多”功能，较完美的实现相关推荐

最新文章

热门文章