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

本文链接：https://blog.youkuaiyun.com/fengtingYan/article/details/84946927

本文介绍了在Vue项目中如何处理文本内容超出指定行数或字数后进行展开收起的操作，提供了相关代码示例，包括CSS、HTML和JavaScript的实现方式，并引用了相关博客资源作为参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/* 只显示5行，其他隐藏为… */

.info{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical
}

参考：https://blog.youkuaiyun.com/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;
		}
	},		
})

设置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.youkuaiyun.com/zhuyuchen321/article/details/81941190

<!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>