場景：

列表中文本最多三行，超出部分省略，并顯示展開收起按鈕，如果文本沒有超出三行則不顯示展開收起按鈕

方案：

1）在div 中添加一個span 然后給div設置超出三行省略，這時候就可以獲取到文本高度和div高度了

優點：能很好的限制超出行數做展開|收起，低于某個行數全部顯示；且對換行空格也有效
缺點：像評論列表這種內容很不固定的，手機上會發現判斷有誤，需要進一步優化。后我想到一個折中辦法是把判斷字符串長度的判斷也加上可以彌補一下

<template><div class="text-box"><div :class="['txt', { 'over-hidden': !unfold }]" ref="textBox"><span ref="spanBox">{{content}}</span><div v-if="ifOver" @click="unfold = !unfold" class="btn":class="[unfold ? 'btn-open' : 'btn-close']">{{unfold ? '收起' : '展開'}}</div></div></div> </template> <script> export default {name: "text-box",data() {return {ifOver: false, // 文本是否超出三行，默認否unfold: false // 文本是否是展開狀態 默認為收起};},props: {content: {type: String,default: ""}},mounted() {// 判斷是否顯示展開收起按鈕this.ifOver = this.$refs.spanBox.offsetHeight > this.$refs.textBox.offsetHeight} }; </script> <style scoped> .txt {font-size: 16px;color: #333;line-height: 0.44rem;text-align: justify;word-break: break-all;word-wrap: break-word;white-space: pre-line;position:relative; } .over-hidden {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden; } .btn {color: #2caf7d;line-height: 0.44rem; } .btn-close{position: absolute;bottom: 0;right: 0;padding-left: .06rem;background: #fff; } .btn-close::before {content: '...';color: #888888; } .btn-open{display: block;width: 2rem;font-size: 0.28rem;color: #2caf7d;line-height: 0.44rem; } </style>

2）根據字符串長度判斷是否做展開|收起、單行|雙行顯示處理

特點：簡單粗暴
缺點：對于有換行字符的，無法準確定位行數
適用場景：大段簡介、標題單行|雙行切換顯示

<template><!-- 話題 簡介 組件 --><div class="intro"><div ref="introContent" class="intro__content" :class="{'intro__content-close': this.intro.length > 100 && !isOpen}">{{intro}}<a v-show="this.intro.length > 100 && !isOpen" @click.stop="handleOpen" class="intro__content-btn">展開</a></div><a v-show="this.intro.length > 100 && isOpen" @click.stop="handleOpen" class="intro__content-btn1">收起</a></div> </template><script> export default {name: "TopicIntro",props: {options: {type: String,required: true}},components: {},data() {return {intro: this.options,isOpen: false, // 是否展開}},computed: {},created() {this.intro = this.intro.replace('<br />', '').replace('<br/>', '');},mounted() {},methods: {handleOpen() {this.isOpen = !this.isOpen}} } </script><style scoped lang="less"> .intro{width: 100%;background-color: #fff;padding: 0 0.36rem; } .intro__content{font-size: 0.28rem;color: #888888;line-height: 0.44rem;text-align: justify;word-break: break-all;word-wrap: break-word;white-space: pre-line; } .intro__content-close{display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 3;word-break: break-all;-o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; text-overflow:ellipsis; overflow: hidden;word-break: break-all;text-align: justify;position: relative;.intro__content-btn{font-size: 0.28rem;color: #2caf7d;line-height: 0.44rem;position: absolute;bottom: 0;right: 0;padding-left: .06rem;background: #fff;&::before {content: '...';color: #888888;}} } .intro__content-btn1{display: inline-block;font-size: 0.28rem;color: #2caf7d;line-height: 0.44rem;padding: 0.14rem 0.3rem 0;margin-left: -0.3rem; } </style> <div class="comm__title">{{weekInfo[0].title | ellipsis }}</div>filters: {ellipsis(value) {if (!value) return "";if (value.length <= 18) {return value.slice(0, 14) + "...";}if (value.length > 18) {return value.slice(0, 33) + "...";}return value;}}

3）根據行數限制通過文字行高計算顯示塊的高度

特點：效果可以
缺點：代碼量大；對有換行符的情況不適用，長段表情類評論顯示有問題
思路：

首先得判斷文本自否超過四行，因為這些一般都是是前端異步請求然后后端發送過來，在組長的指導下，使用了 Vue 中的 nextTick 來監聽 DOM 中是數據變化。
接下來主要是 css 上的思路，其實上圖可以分為兩部分，如下圖，標號1的部分展示前面三行，標號為2的部分會根據1的行數判斷縮進的大小，然后展示第四行。最后通過背景色的控制讓兩者看上去是一段文字。

<template><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> </template><script> export default {name: 'Spread',data () {return {title: '演示展開收起',introduce: '',// 是否展示所有文本內容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·羅杰，在被行刑受死之前說了一句話，讓全世界的人都涌向了大海?！跋胍业膶毑貑?#xff1f;如果想要的話，那就到海上去找吧，我全部都放在那里?！?#xff0c;世界開始迎接“大海賊時代”的來臨。擁有財富、名聲、權力，這世界上的一切的男人 “海賊王”哥爾·D·羅杰，在被行刑受死之前說了一句話，讓全世界的人都涌向了大海?！跋胍业膶毑貑?#xff1f;如果想要的話，那就到海上去找吧，我全部都放在那里?！?#xff0c;世界開始迎接“大海賊時代”的來臨。';},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><style lang="less" scoped rel="stylesheet/less">.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;.intro-content {.merchant-desc {width: 100%;line-height: 21px;}}.unfold {display: block;z-index: 11;float: right;width: 40px;height: 21px;p {margin: 0;line-height: 21px;color: #7fbe87;}}}.detailed-introduce {font-size: 14px;color: #434343;position: relative;overflow: hidden;margin: 10px;.intro-content {// 最大高度設為4倍的行間距max-height: 84px;line-height: 21px;word-wrap: break-word;/*強制打散字符*/word-break: break-all;background: #ffffff;/*同背景色*/color: #ffffff;overflow: hidden;.merchant-desc {width: 100%;line-height: 21px;}&:after,// 這是展開前實際顯示的內容&:before {content: attr(title);position: absolute;left: 0;top: 0;width: 100%;color: #434343// overflow: hidden;}// 把最后最后一行自身的上面三行遮住&:before {display: block;overflow: hidden;z-index: 1;max-height: 63px;background: #ffffff;}&: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;}.unfold {z-index: 11;width: 40px;height: 21px;outline: 0;position: absolute;right: 0;bottom: 0;p {margin: 0;line-height: 21px;color: #7fbe87;}}}}.bottom-prove {height: 100px;width: 100%;background: #dddddd;text-align: center;line-height: 100px;}.change-buttom {font-size: 14px;color: #2371be;.long {text-align: 21px;text-align: center;height: 21px;}.short {text-align: 21px;text-align: center;height: 20px;}} </style> 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的评论 展开|收起的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。