Vue 中文本内容超出规定行数（字数）后展开收起的处理，超出部分...显示

1. /* 只显示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