2024年Web前端最全Vue 中文本内容超出规定行数（字数）后展开收起的处理，超出部分，武汉软通动力前端面试

常用的JavaScript设计模式

• 单体模式

• 工厂模式

• 例模式

  

函数

• 函数的定义

• 局部变量和全局变量

• 返回值

• 匿名函数

• 自运行函数

• 闭包

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

.container.fold{

-webkit-line-clamp:5;

}

.container.unfold{

-webkit-line-clamp:100;

}

.show{

font-size: 13px;

color:cornflowerblue;

}

HTML

    

{{film.filmInfo}}

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;

}

• 3 实现显示50个字符 超出部分用…代替

  Ccs不能精确到字符，直接三目运算，三目运算就是三元表达式

  直接在显示的地方用substring(0,50)截断就好。

  str.length>50?substring(0,50) + “…”:str

  ---

  这个是不通的我也不知道为什么…

  https://blog.csdn.net/zhuyuchen321/article/details/81941190