- /* 只显示5行,其他隐藏为… */
.info{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical
}
参考:https://blog.csdn.net/h1lin0010/article/details/80002824?utm_source=blogxgwz4
效果:
源码:(这个有一点问题)
css
.container{
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
/* margin: 10px 0 10px 0; */
font-size: 15px;
}
.container.fold{
-webkit-line-clamp:5;
}
.container.unfold{
-webkit-line-clamp:100;
}
.show{
font-size: 13px;
color:cornflowerblue;
}
HTML
<div class="container":title="film.filmInfo" :class="fold ? 'fold' : 'unfold'" v-if