效果图：
代码：
<template>
<view class="text-container">
<text class="text-content" @click="showDetail">{{ text }}</text>
<text v-if="showMore" class="view-detail" @click="showDetail" style="color: #457AE6;">查看详情</text>
<text v-if="showText&&!showMore" class="view-detail" @click="showShrink" style="color: #457AE6;">收起</text>
</view>
</template>
<script>
export default {
mounted() {
this.text = '这里是一段很长的文本内容，我们需要对超出一定长度的见到过伤筋动骨几十个地级市的世界观的几十个地级市高端就是给大家圣诞节后视镜的呼声结婚的结婚建设大街的好时机回到家';
this.textyl = this.text
this.checkTextLength();
},
data() {
return {
text: '',//剪切之后的文字
textyl:'',//原来的字符
showMore: false,//判断显示查看或者收起 小于40字不展示
textlength: false,//判断是否点击详情 true为点击详情 false为点击收起
showText:false//收起文字的显示隐藏
};
},
computed: {
},
methods: {
checkTextLength() {
if (this.text.length > 40 && !this.textlength) {
this.showMore = true;
this.showText = false
this.text = this.text.substring(0, 40) + '...';
} else {
this.showText= true
this.showMore = false;
this.textlength = false
this.text = this.textyl
}
},
showDetail() {
if (this.showMore) {
this.textlength = true
this.checkTextLength()
}
},
showShrink() {
if (this.showText) {
this.textlength = false
this.checkTextLength()
}
},
}
};
</script>
<style>
.clamp-text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
view {
color: #007aff;
}
</style>