css实现文本展开收起 并且文本环绕按钮
已封装成组件 拿走不谢!!!
<template>
<div class="warp">
<div class="text" :class="isOpen ? '' : 'ellipsis'" id="ellipsis_box">
<span class="switch" v-if="!isOpen && !isShowBtn"><text style="margin-right: 10rpx;"
@click="handleSwitch()">
▼</text>展开</span>
<span class="switch" v-if="isOpen && !isShowBtn"><text style="margin-right: 10rpx;" @click="handleSwitch()">
▲
</text>收起</span>
<text v-html="content"></text>
</div>
</div>
</template>
<script>
export default {
props: {
content: {
type: String,
required: true
}
},
data() {
return {
isOpen: false,
isShowBtn: true
}
},
mounted() {
const box = document.getElementById('ellipsis_box')
if (box.scrollHeight > box.clientHeight) {
this.isShowBtn = false
}
},
methods: {
handleSwitch() {
this.isOpen = !this.isOpen
},
}
}
</script>
<style lang="scss" scoped>
.warp {
display: flex;
.ellipsis {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.text {
.switch {
float: right;
clear: both;
color: #21a0ff;
margin-right: 10rpx;
}
}
.text::before {
content: '';
width: 0rpx;
height: calc(100% - 38rpx);
background-color: red;
float: right;
}
}
</style>
温馨提示:引用此组件 传个 content即可!!!