1、单行文本溢出,显示 …
<template>
<div class="text-div">{{ value }}</div>
</template>
<script>
export default{
data(){
return {
value: '单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行文本单行文本',
}
}
}
</script>
<style lang="scss" scoped>
.text-div{
width: 300px;
height: 16px;
margin: 20px 0;
/*单行文本溢出*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
结果显示如下:
2、多行文本溢出,显示指定行数 + …
<template>
<div class="text-div">
<span class="content-box">{{value}}</span>
</div>
</template>
<script>
export default{
data(){
return {
value: `
多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
`
}
}
}
</script>
<style lang="scss" scoped>
.text-div{
width: 300px;
margin: 20px 0;
position: relative;
/*多行文本溢出*/
.content-box{
display: -webkit-box;
display: -moz-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3
}
}
</style>
结果显示如下:
3、多行文本溢出,显示 指定行数 + …+展开、收起按钮
<template>
<div class="text-div">
<span class="content-box" :style="contentStyle">{{value}}</span>
<span class="btn-box" @click="toggleClass">
{{btnName}}
<i :class="btnName === '展开' ? 'el-icon-caret-bottom' : 'el-icon-caret-top'"></i>
</span>
</div>
</template>
<script>
export default{
data(){
return {
value: `
多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
`,
btnName: '展开', //按钮文字:展开、收起
}
},
computed: {
contentStyle(){
return {
'-webkit-line-clamp': this.btnName==='展开' ? 3 : 100000
}
}
},
methods: {
// 点击 展开或收起 按钮事件
toggleClass(){
this.btnName = this.btnName === '展开' ? '收起' : '展开'
},
}
}
</script>
<style lang="scss" scoped>
.text-div{
width: 300px;
margin: 20px 0;
position: relative;
/*多行文本溢出*/
.content-box{
display: -webkit-box;
display: -moz-box;
overflow: hidden;
-webkit-box-orient: vertical;
}
/*展开、收起按钮样式*/
.btn-box{
position: absolute;
bottom: 0;
right: -45px;
cursor: pointer;
color: #1482f0;
}
}
</style>
结果显示如下: