css + js 实现多行文本超出显示展开和收起效果
// CollapseText <template> <div> <div class="wrapper"> <input :id="id" class="exp" type="checkbox" /> <div class="text" ref="textRef"> <label v-if="isTextOverflow" class="btn" :for="id"></label> <slot></slot> </div> </div> </div> </template> <script> import { ref, computed, onMounted } from "vue"; export default { props: { id: { type: String, required: true, }, }, setup() { const textRef = ref(null); const isTextOverflow = computed(() => { if (textRef.value) { return textRef.value.scrollHeight > textRef.value.clientHeight; } return false; }); onMounted(() => { if (textRef.value) { textRef.value.style.height = "auto"; } }); return { textRef, isTextOverflow, }; }, }; </script> <style scoped> .wrapper { display: flex; margin: 50px auto; width: 800px; overflow: hidden; border-radius: 8px; padding: 15px; box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff; }
.text {
font-size: 20px;
overflow: hidden;
text-overflow: ellipsis;
text-align: justify;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
-webkit-line-clamp: 3;
-moz-line-clamp: 3;
-ms-line-clamp: 3;
-o-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
-o-box-orient: vertical;
box-orient: vertical;
position: relative;
}
.text::before { content: ""; height: calc(100% - 24px); float: right; } .btn { float: right; clear: both; margin-left: 10px; font-size: 16px; padding: 0 8px; background: #3f51b5; line-height: 24px; border-radius: 4px; color: #fff; cursor: pointer; } .btn::before { content: "展开"; } .exp { display: none; } .exp:checked + .text { -webkit-line-clamp: 999; } .exp:checked + .text .btn::before { content: "收起"; } </style>
<template> <div> <CustomComponent v-for="item in data" :key="item.id" :id="item.id"> {{item.content}} </CustomComponent> </div> </template> <script> import CustomComponent from "./components/CollapseText.vue"; export default { components: { CustomComponent, }, data() { return { data: [ { id: "exp1", content: "浮动元素是如何定位的", }, { id: "exp2", content: "我来册封撒旦范德萨发大水发大水发发大水发大水发大水发大我来册封撒旦范德萨发大水发大水发发大水发大水发大水发大水我来册封撒旦范德萨发大水发大水发发大水发大水发大水发大我来册封撒旦范德萨发大水发大水发发大水发大水发大水发大水我来册封撒旦范德萨发大水发大水发发大水发大水发大水发大水我来册封撒旦范德萨发大水发大水发发大水发大水发大水发大水水。", }, { id: "exp3", content: " 浮动元素是如何定位的 正如我们前面提到的那样,当一个元素浮动之后,它会被移出正常的文档流,然后向左或者向右平移,一直平移直到碰到了所处的容器的边框,或者碰到另外一个浮动的元素。 在下面的图片中,有三个红色的正方形。其中有两个向左浮动,一个向右浮动。要注意到第二个向左浮动的正方形被放在第一个向左浮动的正方形的右边。如果还有更多的正方形这样浮动,它们会继续向右堆放,直到填满容器一整行,之后换行至下一行。", }, { id: "exp4", content: "浮动元素是如何定位的浮动元素是如何定位的浮动元素是如何定位的浮动元素是如何定位的浮动元素浮动元素是如何定位的浮动元素是如何定位的浮动元素是如何定位的浮动元素是如何定位的浮动元素是如何定位的", }, ], }; }, }; </script>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」