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="film.filmInfo !==''" >
	<label>&nbsp;&nbsp;&nbsp;&nbsp;
		<span>{{film.filmInfo}}</span>
	</label>	
</div>			
<div class="show" @click="handleFold" v-show="fold">展开</div>
<div class="show" @click="handleFold" v-show="!fold">收起</div>

JavaScript

var app = new Vue({
	el: '#app',
	data: {
		fold:true,
	},
	methods: {
		handleFold(){
			this.fold=!this.fold;
		}
	},		
})

2. 设置li 超出文字不显示
   https://chang8536.iteye.com/blog/2035637
   效果：
   
   源码：

ul{
	padding: 0;
	margin: 0 ;
	list-style: none;
}

.film-title{
	display: inline-block;
	width: 100%;
	height: 20px;
	white-space: nowrap;
	text-overflow:ellipsis;
	overflow: hidden;
	/* display: -webkit-box; */
    /* -webkit-box-orient: vertical; */
	font-size: 16px;
	margin: 0 auto;
}

<ul @click="videoDetail(action)">
	<li>
		<img width="90%" alt="" :src="action.filmUrlPoster">
	</li>
	<li class="film-title" v-text="action.filmTitle"></li>
</ul>

3 实现显示50个字符 超出部分用…代替
Ccs不能精确到字符，直接三目运算，三目运算就是三元表达式
直接在显示的地方用substring(0,50)截断就好。

str.length>50?substring(0,50) + "...":str

---

这个是不通的我也不知道为什么…
https://blog.csdn.net/zhuyuchen321/article/details/81941190

    
    
    
    
    
    



    

        
{{title}}
        
为了证明楼下的那货不会对我造成影响
        

            

                
                    {{introduce}}
                
                

                    
{{exchangeButton ? '展开' : '收起'}}
                
            
        
        
为了证明楼上的那货不会对我造成影响
        

        
点这试试一段比较长的文字
        
点这试试一段比较短的文字