超级会员免费看
这篇博客介绍了如何使用JavaScript和HTML实现内容区域在超过4行时隐藏多余部分，点击后全部展开。核心知识点包括offsetHeight的获取、内容高度与四行高度的比较、动态添加样式以及监听页面数据变化的实现。
【一具体逻辑如下：】
1 如果内容不足4行，那就全部展示
2 内容过多时候，超过4行，默认隐藏起来多余的（这里算4行）
3 当点击展开时候，全部内容展示（图一）
4 当点击隐藏以后， 超过4行的内容会被隐层（图二）
（图一）
（图二）
【二 核心知识点梳理】
2.1 要计算这个内容容器（div）的可视高度（可见高度值）offsetHeight，要获取这个h1 = this.$refs.div11.offsetHeight ( h1就是下面文中的 this.offsetHeightDemo)
2.2 我们要知道四行文本内容的高度h2(140px),这个看字体大小，F12以后就可以查看高度
<
订阅专栏 解锁全文
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
