Vue 中文本内容超出规定行数（字数）后展开收起的处理，不显示
只显示五行
class=“info”javascript
-
/* 只显示5行，其余隐藏为… */css
.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
效果：
源码：(这个有一点问题)
csshtml
.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;
}
HTMLvue
<div class="container":title="film.filmInfo" :class="fold ? 'fold' : 'unfold'" v-if="film.filmInfo !==''" >
<label>
<span>{{film.filmInfo}}</span>
</label>
</div>
<div class="show" @click="handleFold" v-show="fold">展开</div>
<div class="show" @click="handleFold" v-show="!fold">收起</div>
JavaScriptjava
var app = new Vue({
el: '#app',
data: {
fold:true,
},
methods: {
handleFold(){
this.fold=!this.fold;
}
},
})
- 设置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>
这个是不通的我也不知道为何…
http://www.javashuo.com/article/p-pacorogj-nb.htmlweb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.top-prove {
height: 100px;
width: 100%;
background: #dddddd;
text-align: center;
line-height: 100px;
}
.total-introduce {
height: auto;
overflow: hidden;
font-size: 14px;
color: #434343;
margin: 10px;
}
.total-introduce .intro-content .merchant-desc {
width: 100%;
line-height: 21px;
}
.total-introduce .unfold {
display: block;
z-index: 11;
float: right;
width: 40px;
height: 21px;
}
.total-introduce .unfold p {
margin: 0;
line-height: 21px;
color: #7fbe87;
}
.detailed-introduce {
font-size: 14px;
color: #434343;
position: relative;
overflow: hidden;
margin: 10px;
}
.detailed-introduce .intro-content {
/* // 最大高度设为4倍的行间距 */
max-height: 84px;
line-height: 21px;
word-wrap: break-word;
/*强制打散字符*/
word-break: break-all;
background: #ffffff;
/*同背景色*/
color: #ffffff;
overflow: hidden;
}
.intro-content:after,
/* // 这是展开前实际显示的内容 */
.intro-content :before {
content: attr(title);
position: absolute;
left: 0;
top: 0;
width: 100%;
color: #434343
/* overflow: hidden; */
}
/* // 把最后最后一行自身的上面三行遮住 */
.intro-content:before {
display: block;
overflow: hidden;
z-index: 1;
max-height: 63px;
background: #ffffff;
}
.intro-content:after {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
height: 81px;
/*截取行数*/
-webkit-line-clamp: 4;
text-overflow: ellipsis;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/*行首缩进字符数，值为[(截取行数-1)*尾部留空字符数]*/
text-indent: -12em;
/*尾部留空字符数*/
padding-right: 4em;
}
.detailed-introduce .intro-content .unfold {
z-index: 11;
width: 40px;
height: 21px;
outline: 0;
position: absolute;
right: 0;
bottom: 0;
}
.detailed-introduce .intro-content .unfold p {
margin: 0;
line-height: 21px;
color: #7fbe87;
}
.detailed-introduce .intro-content .merchant-desc {
width: 100%;
line-height: 21px;
}
.bottom-prove {
height: 100px;
width: 100%;
background: #dddddd;
text-align: center;
line-height: 100px;
}
.change-buttom {
font-size: 14px;
color: #2371be;
}
.change-buttom .long {
text-align: 21px;
text-align: center;
height: 21px;
}
.change-buttom .short {
text-align: 21px;
text-align: center;
height: 20px;
}
</style>
</head>
<body>
<div>
<div style="text-align: center">{{title}}</div>
<div class="top-prove">为了证实楼下的那货不会对我形成影响</div>
<div :class="showTotal ? 'total-introduce' : 'detailed-introduce'">
<div class="intro-content" :title="introduce" ref="desc">
<span class="merchant-desc" v-if="introduce">
{{introduce}}
</span>
<div class="unfold" @click="showTotalIntro" v-if="showExchangeButton">
<p>{{exchangeButton ? '展开' : '收起'}}</p>
</div>
</div>
</div>
<div class="bottom-prove">为了证实楼上的那货不会对我形成影响</div>
<div class="change-buttom">
<div class="long" @click="tryLong">点这试试一段比较长的文字</div>
<div class="short" @click="tryShort">点这试试一段比较短的文字</div>
</div>
</div>
</body>
<script src="vue/vue.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
title: '演示展开收起',
introduce: 'vcx',
// 是否展现全部文本内容
showTotal: true,
// 显示展开仍是收起
exchangeButton: true,
// 是否显示展开收起按钮
showExchangeButton: false,
rem: ''
},
mounted() {
this.init();
},
methods: {
showTotalIntro() {
console.log(this.showTotal);
this.showTotal = !this.showTotal;
this.exchangeButton = !this.exchangeButton;
},
getRem() {
console.log('getRem');
const defaultRem = 16;
let winWidth = window.innerWidth;
console.log('winWidth:' + winWidth);
let rem = winWidth / 375 * defaultRem;
return rem;
},
init() {
this.introduce = '拥有财富、名声、权力，这世界上的一切的男人--哥尔·D·罗杰，在被行刑受死以前说了一句话，让全世界的人都涌向了大海。“想要个人宝藏吗？若是想要的话，那就到海上去找吧，我所有都放在那里。”，世界开始迎接“大海贼时代”的来临。拥有财富、名声、权力，这世界上的一切的男人 “海贼王”哥尔·D·罗杰，在被行刑受死以前说了一句话，让全世界的人都涌向了大海。“想要个人宝藏吗？若是想要的话，那就到海上去找吧，我所有都放在那里。”，世界开始迎接“大海贼时代”的来临。';
},
tryLong () {
let longIntroduce = 'Vue是一套用于构建用户界面的渐进式框架。Vue 被设计为能够自底向上逐层应用。Vue 的核心库只关注视图层，不只易于上手，还便于与第三方库或既有项目整合。另外一方面，当与现代化的工具链以及各类支持类库结合使用时，Vue 也彻底可以为复杂的单页应用提供驱动。Vue (读音 /vjuː/，相似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不一样的是，Vue 被设计为能够自底向上逐层应用。Vue 的核心库只关注视图层，不只易于上手，还便于与第三方库或既有项目整合。另外一方面，当与现代化的工具链以及各类支持类库结合使用时，Vue 也彻底可以为复杂的单页应用提供驱动。';
if (this.introduce !== longIntroduce) {
this.showExchangeButton = false;
this.showTotal = true;
this.introduce = longIntroduce;
}
},
tryShort () {
let shortIntroduce = 'Vue (读音 /vjuː/，相似于 view) 是一套用于构建用户界面的渐进式框架。';
if (this.introduce !== shortIntroduce) {
this.showExchangeButton = false;
this.showTotal = true;
this.introduce = shortIntroduce;
}
}
},
watch: {
'introduce': function () {
this.$nextTick(function () {
console.log('nextTick');
// 判断介绍是否超过四行
let rem = parseFloat(this.getRem());
console.log('watch 中的rem', rem);
if (!this.$refs.desc) {
console.log('desc null');
return;
}
let descHeight = window.getComputedStyle(this.$refs.desc).height.replace('px', '');
console.log('descHeight:' + descHeight);
console.log('若是 descHeight 超过' + (5.25 * rem) + '就要显示展开按钮');
if (descHeight > 5.25 * rem) {
console.log('超过了四行');
// 显示展开收起按钮
this.showExchangeButton = true;
this.exchangeButton = true;
// 不是显示全部
this.showTotal = false;
} else {
// 不显示展开收起按钮
this.showExchangeButton = false;
// 没有超过四行就显示全部
this.showTotal = true;
console.log('showExchangeButton', this.showExchangeButton);
console.log('showTotal', this.showTotal);
}
}.bind(this));
}
}
})
</script>
</html>