html
<el-row>
<el-col :span="12">
<div class="title">合同内容:</div>
<div class="container" :class="fold ? 'fold' : 'unfold'">
<label>
<p><span>{{ form.conContent }}</span></p>
</label>
</div>
<div v-show="fold" class="show" @click="handleFold">展开</div>
<div v-show="!fold" class="show" @click="handleFold">收起</div>
</el-col>
</el-row>
方法
return {
fold: true,
}
},
methods: {
handleFold() {
this.fold = !this.fold
},
}
style 样式
.title{
float:left;
line-height: 46px;
color: #999999;
}
.container{
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
width: 82%;
line-height: 46px;
font-size: 15px;
float:left
}
.container p{
line-height: 24px !important;
margin: 11px 0!important;
}
.container.fold{
-webkit-line-clamp:1;
}
.container.unfold{
-webkit-line-clamp:100;
}
.show{
float: left;
line-height: 46px;
cursor: pointer;
font-size: 13px;
color:cornflowerblue;
}
