使用css实现 “查看更多” 的功能和样式

当文字过长时，我们通常使用省略号的形式限制行数，这种可实现大多数的情况。
但是，当我们要在文字超出时的末尾添加一个查看更多按钮，不超出时不显示此按钮，
单纯使用省略号的方式并不能实现，因为我们并不知道何时才会出现省略号。

通过一番尝试，发现一种可用float的排列原理实现此功能，先上代码：

<html lang="en">
<style>
.container {width: 500px;height: 500px;border: 1px solid #ccc;display: flex;flex-wrap: wrap;flex-direction: column;margin: 100px auto;
}
.comment-detail-wrapper {position: relative;overflow: hidden;
}.comment-detail {max-height: 63px;word-break: break-word;
}.comment-detail-fake {position: absolute;left: 0;top: 0;right: 0;color: transparent;
}
.ellipsis-abs {width: 100%;height: 100%;position: absolute;left: 50%;top: 0;
}
.ellipsis-abs::before {float: right;content: '';width: 50%;height: 100%;
}
.ellipsis-abs .ellipsis-placeholder {float: right;width: 50%;height: 63px;
}
.ellipsis-more {float: right;margin-top: -21px;color: #aaa;background: #fff;cursor: pointer;
}</style>
<body><div class="container"><div class="comment-detail-wrapper"><div class="comment-detail">《背影》是现代作家朱自清（1898-1948）于1925年所写的一篇回忆性散文。这篇散文叙述的是作者离开南京到北京大学，父亲送他到浦口火车站，照料他上车，并替他买橘子的情形。在作者脑海里印象最深刻的，是他父亲替他买橘子时在月台爬上攀下时的背影。作者用朴素的文字，把父亲对儿女的爱，表达得深刻细腻，真挚感动，从平凡的事件中，呈现出父亲的关怀和爱护</div><div class="comment-detail-fake"><div>《背影》是现代作家朱自清（1898-1948）于1925年所写的一篇回忆性散文。这篇散文叙述的是作者离开南京到北京大学，父亲送他到浦口火车站，照料他上车，并替他买橘子的情形。在作者脑海里印象最深刻的，是他父亲替他买橘子时在月台爬上攀下时的背影。作者用朴素的文字，把父亲对儿女的爱，表达得深刻细腻，真挚感动，从平凡的事件中，呈现出父亲的关怀和爱护</div><div class="ellipsis-abs"><div class="ellipsis-placeholder"></div><div class="ellipsis-more" onclick="lookMore()">...查看更多</div></div></div></div></div>
</body>
<script>const detailEle = document.querySelector('.comment-detail')const detailFakeEle = document.querySelector('.comment-detail-fake')const lookMore = function () {detailEle.style.maxHeight = 'none'detailFakeEle.style.display = 'none'}
</script>
</html>

*其中：样式中的最大高度需要根据文本的字体大小有所调整

使用css实现 “查看更多” 的功能和样式相关推荐

js实现类似查看更多的功能
实现效果在处理错误信息提示时,如果信息太多,一次性展示的话,看着很乱,那有没有更好的展示方式呢? 经过一番讨论,找到了类似于某乎上的这种效果,如下图: 既能告诉用户后续还有信息,也没有一下子显示全部 ...
js实现加载所有内容点击查看更多
功能:过长文章内容实现通过查看更多实现 js代码直接套, 示例CSS 请忽视, 具体根据需求设置 <!DOCTYPE html> <head><meta http-eq ...
“查看更多”功能，较完美的实现
"查看更多"功能,较完美的实现需求: 文本过多时隐藏文本,用省略号代替,省略号后面有"查看更多"的按钮. 点击"查看更多"后展开所有文本, ...
php点击查看更多,微信小程序加载更多和点击查看更多功能介绍
这篇文章主要为大家详细介绍了微信小程序加载更多,点击查看更多功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序加载更多功能实现的具体代码,供大家参考,具体内容如下 ...
Vue简单的查看更多功能
Vue简单的查看更多功能循环的数据查看更多按钮
Android 仿美团网，探索使用ViewPager+GridView实现左右滑动查看更多分类的功能
不记得什么时候,我留意到到美团网首页有使用ViewPager+GridView实现左右滑动查看更多分类的一个功能,感觉它很有趣,于是想着自己动手也实现这样一个功能,和往常一样,主要是想总结一下我在学习 ...
微信小程序——收起和查看更多功能
大概的需求就是默认只显示2条,点击[查看更多]显示全部,点击[收起]还原. 实现的方法千万种.我来讲一下我的实现思路: 1.先判断列表的长度,如果小于3就不要[查看更多]这个按钮了. 2.根据索引的大 ...
overflow超出显示_实现：超过N行折叠并显示“...查看全部”【功能】
❝ 多行文本超过指定行数隐藏超出部分并显示"...查看全部"是一个常遇到的需求,网上也有人实现过类似的功能,不过还是想自己写写看, ❞ 于是就写了一个Vue的组件,本文简单介绍一下 ...
jq加css制作图片切换,jQuery+css实现的切换图片功能代码
本文实例讲述了jQuery+css实现的切换图片功能代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: demo body { margin:0; padding:0; } . ...

使用css实现 “查看更多” 的功能和样式

使用css实现 “查看更多” 的功能和样式相关推荐

最新文章

热门文章