vue实现文字超出3行时,后面显示省略号和更多
代码】vue实现文字超出3行时,后面显示省略号和更多。
·
<template>
<ul>
<li v-for=(item,index) in schoolselegantList :key="index">
<div class="dp-text-ellipsis-wrapper">
<div class="text" :style="textStyleObject" ref="text">
<label class="btn" @click="gotoIntro">更多</label>
{{item.title}}
</div>
</div>
</li>
</ul>
</template>
<script>
export default {
return {
lineClamp: 3,
schoolselegantList: [
{
imageurl: '../../../../public/top/image/group_icon.png',
schoolNmae: '深圳高级中学',
children: [
{
num: 20,
name1: '直播'
}, {
num: 20,
name1: '专题课程'
}, {
num: 20,
name1: '微课'
}, {
num: 20,
name1: '文档'
}
],
title: '在钱塘开茶铺的赵盼儿(刘亦菲 饰)惊闻未婚夫、新科探花欧阳旭(徐海乔 饰)要另娶当朝高官之女,不甘命运的她誓要上京讨个公道。在途中她遇到了出自权门但生性正直的皇城司指挥顾千帆(陈晓 饰),并卷入江南一场大案,两人不打不相识从而结缘。赵盼儿凭借智慧解救了被骗婚而惨遭虐待的“江南第一琵琶高手”宋引章(林允 饰)与被苛刻家人逼得离家出走的豪爽厨娘孙三娘(柳岩 饰),三位姐妹从此结伴同行,终抵汴京,见识世间繁华。'
}
],
},
computed: {
textStyleObject () {
return {
'max-height': `${2 * this.lineClamp}em `
}
}
}
}
</script>
<style>
.dp-text-ellipsis-wrapper {
display: flex;
margin: 6px 0 20px 0;
overflow: hidden;
font-size: 14px;
line-height: 20px;
}
.text {
position: relative;
overflow: hidden;
line-height: 2.1;
line-height: 30px;
text-align: justify;
text-overflow: ellipsis;
word-break: break-all;
}
.text::before {
float: right;
height: calc(100% - 20px);
content: '';
}
.btn {
position: relative;
float: right;
clear: both;
margin-left: 10px;
font-size: 14px;
padding: 0 8px;
color: #206ef7;
line-height: 20px;
border-radius: 4px;
cursor: pointer;
z-index: 10;
}
.btn::before {
position: absolute;
left: 1px;
color: #333;
transform: translateX(-100%);
content: '...';
}
</style>
实现效果如下
更多推荐
已为社区贡献1条内容
所有评论(0)