需求背景
文字超出五行后,需要隐藏并提供折叠查看功能
实现效果
(展示为模拟数据)
思路借鉴
https://zhuanlan.zhihu.com/p/400514833
优点:只需要利用css即可实现
-
该示例
不满足我需求中:- 如果文字没有超出最大值,不需要展示折叠按钮
- 需要多处使用
但也贴一下我按照博主思路写的最终代码。
完整代码
<style>
.content {
display: flex;
}
.text::before{
content: '';
float: right;
height: 100%;
margin-bottom: -20px;
}
.btn {
float: right;
clear: both;
margin-right: 8px;
color: dodgerblue;
cursor: pointer;
}
.text {
width: 475px;
border: aqua solid 1px;
color: #333;
font-size: 14px;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
#exp {
visibility: hidden;
}
#exp:checked+.text{
-webkit-line-clamp: 999; /*设置一个足够大的行数就可以了*/
}
.btn::after{
content:'展开'
}
#exp:checked+.text .btn::after{
content:'收起'
}
</style>
<div class="content">
<input type="checkbox" id="exp" />
<div class="text">
<label class="btn" for="exp"></label>
<span>
但听得蹄声如雷,十余乘马疾风般卷上山来。马上乘客一色都是玄色薄毡大氅,
里面玄色布衣,但见人似虎,马如龙,人既矫捷,马亦雄骏,每一匹马都是高头
但听得蹄声如雷,十余乘马疾风般卷上山来。马上乘客一色都是玄色薄毡大氅,
里面玄色布衣,但见人似虎,马如龙,人既矫捷,马亦雄骏,每一匹马都是高头
但听得蹄声如雷,十余乘马疾风般卷上山来。马上乘客一色都是玄色薄毡大氅,
里面玄色布衣,但见人似虎,马如龙,人既矫捷,马亦雄骏,每一匹马都是高头
</span>
</div>
</div>
-
效果
表格内容多处可折叠关键代码
借鉴以上思路,结合我这边的需求调整了下做法。需要结合js处理。
-
css
- html
<td>
<div class="text">
<label class="btn">...展开</label>
<span class="span-text">
单元格内容
</span>
</div>
</td>
-
js
注意:需要确保table渲染完毕再执行下列逻辑,我这里利用了timeout的异步机制