vue實現(xiàn)移動端項目多行文本溢出省略
多行文本溢出省略
在做微信公眾號開發(fā)時,有個需求是這樣的
找到了一個方法,
<div>2323文字提示氣泡框，在鼠標(biāo)懸停時顯示，代替了系統(tǒng)的title提示。文字提示氣泡框，在鼠標(biāo)懸停時顯示，代替了系統(tǒng)的title提示。文字提示氣泡框，在鼠標(biāo)懸停時顯示，代替了系統(tǒng)的title提示。文字提示氣泡框，在鼠標(biāo)懸停時顯示，代替了系統(tǒng)的title提示。文字提示氣泡框，在鼠標(biāo)懸停時顯示，代替了系統(tǒng)的title提示。</div><!-- 上面這樣寫是無效的--><!-- 下面這樣寫才有效果1,需要在p標(biāo)簽內(nèi)(其他行內(nèi)標(biāo)簽沒事嘗試,比較懶),2,需要加兩行注釋 /* autoprefixer: off */ 和 /* autoprefixer: on */至于原因還不清楚,弄明白了之后再更新--><div><p>2323文字提示氣泡框，在鼠標(biāo)懸停時顯示，代替了系統(tǒng)的title提示。文字提示氣泡框，在鼠標(biāo)懸停時顯示，代替了系統(tǒng)的title提示。文字提示氣泡框，在鼠標(biāo)懸停時顯示，代替了系統(tǒng)的title提示。文字提示氣泡框，在鼠標(biāo)懸停時顯示，代替了系統(tǒng)的title提示。文字提示氣泡框，在鼠標(biāo)懸停時顯示，代替了系統(tǒng)的title提示。</p></div>
p{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; /* autoprefixer: off */ -webkit-box-orient:vertical; /* autoprefixer: on */ -webkit-line-clamp:2; }
補充知識：vue中實現(xiàn)文字超過2行... 展開-收起(兼容ie)
1、先看看實際效果
2.需求一步一步分析
當(dāng)文字超出省略號 就想到css樣式實現(xiàn)（ie不兼容）
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
3.由于自己也是一個懶人、就想在網(wǎng)上找找、看了幾篇文章都是根據(jù)width、height來計算的 看了一下寫的比較復(fù)雜、都只是針對單個文本來的、現(xiàn)實中一般都是列表展示數(shù)據(jù)的
代碼如下：復(fù)制代碼即可運行、兼容ie
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Vue 中文字超過2行顯示省略號 展開-收起</title> <style> .content { display: flex; margin-bottom: 30px; } .text { position: relative; font-size: 14px; line-height: 20px; letter-spacing: 2px; color: #666666; } .retract { position: relative; overflow: hidden; } .retract:after { content: ’...’; position: absolute; bottom: 0; right: 2px; width: 25px; padding-left: 30px; background: linear-gradient(to right, transparent, #fff 45%); } .btn { position: absolute; right: 0; bottom: -30px; font-size: 14px; line-height: 19px; letter-spacing: 2px; color: #FFAD41; cursor: pointer; } .more { font-size: 14px; line-height: 20px; letter-spacing: 2px; color: #666666; visibility: hidden; } </style></head><body> <div id='app'> <div class='view'> <div ref='more'> 占位 </div> <div v-for='(item, index) in curData' :key='index'> <div class='text'> <div : : ref='textContainer'> {{item.desc}} </div> <div class='btn'> <p v-if='item.status' @click='item.status = false'>展開</p> <p v-if='item.status == false' @click='item.status = true'>收起</p> </div> </div> </div> </div> </div></body></html><script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script><script> new Vue({ el: ’#app’, data() { return { curData: [ { desc: ’人物、情節(jié)、環(huán)境是小說的三要素。情節(jié)一般包括開端、發(fā)展、高潮、結(jié)局四部分，有的包括序幕、尾聲。環(huán)境包括自然環(huán)境和社會環(huán)境。 小說按照篇幅及容量可分為長篇、中篇、短篇和微型小說（小小說）。按照表現(xiàn)的內(nèi)容可分為神話、仙俠、武俠、科幻、懸疑、古傳、當(dāng)代、浪漫青春、游戲競技等。按照體制可分為章回體小說、日記體小說、書信體小說、自傳體小說。按照語言形式可分為文言小說和白話小說。’ }, { desc: ’小說刻畫人物的方法：心理描寫、動作描寫、語言描寫、外貌描寫、神態(tài)描寫，同時，小說是一種寫作方法。’ }, { desc: ’與其他文學(xué)樣式相比，小說的容量較大，它可以細(xì)致地展現(xiàn)人物性格和人物命運，可以表現(xiàn)錯綜復(fù)雜的矛盾沖突，同時還可以描述人物所處的社會生活環(huán)境。優(yōu)勢是可以提供整體的、廣闊的社會生活。’ }, { desc: ’純文學(xué)中的小說體裁講究純粹性。“謊言去盡之謂純。”(出自墨人鋼《就是》創(chuàng)刊題詞)便是所謂的“純”。也就是說，小說在構(gòu)思及寫作的過程中能去盡政治謊言、道德謊言、商業(yè)謊言、維護(hù)階級權(quán)貴謊言、愚民謊言等謊言，使呈現(xiàn)出來的小說成品具備純粹的藝術(shù)性。小說的純粹性是閱讀者最重要的審美期待之一。隨著時代的發(fā)展，不光是小說，整個文學(xué)的純粹性逾來逾成為整個世界對文學(xué)審美的一個重要核心。’ } ], textHeight: null } }, mounted() { this.curData.forEach((ele, index) => { this.$set(this.curData, index, Object.assign({}, ele, { status: null })) }) // DOM 加載完執(zhí)行 this.$nextTick(() => { this.calculateText() }) window.onresize = () => { this.curData.forEach((ele, index) => { this.$set(this.curData, index, Object.assign({}, ele, { status: null })) }) setTimeout(() => { this.calculateText() }, 0) } }, methods: { // 計算文字 顯示展開 收起 calculateText() { // 獲取一行文字的height 計算當(dāng)前文字比較列表文字 let oneHeight = this.$refs.more.scrollHeight let twoHeight = oneHeight * 2 || 40 this.textHeight = `${twoHeight}px` let txtDom = this.$refs.textContainer for (let i = 0; i < txtDom.length; i++) { let curHeight = txtDom[i].offsetHeight if (curHeight > twoHeight) { this.$set(this.curData, i, Object.assign({}, this.curData[i], { status: true })) } else { this.$set(this.curData, i, Object.assign({}, this.curData[i], { status: null })) } } } } })</script>
4、分析代碼
省略號通過:after偽類實現(xiàn)
文字一行高度、在瀏覽器中展示都有所區(qū)別、所以在這里我在頁面放置了一段占位文本設(shè)置了隱藏占位
通過獲取占位文本的高度 * 2 計算出2行文本內(nèi)容 動態(tài)改變status狀態(tài) null-無展開收起 true-展開 false-收起 結(jié)合max-height實現(xiàn)
5、完結(jié) （不明白可以提問交流、謝謝）
以上這篇vue實現(xiàn)移動端項目多行文本溢出省略就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Java commons-httpclient如果實現(xiàn)get及post請求2. 一文帶你徹底理解Java序列化和反序列化3. JS中6個對象數(shù)組去重的方法4. Python基于requests庫爬取網(wǎng)站信息5. vscode運行php報錯php?not?found解決辦法6. python中文本字符處理的簡單方法記錄7. PHP laravel實現(xiàn)導(dǎo)出PDF功能8. Python使用Selenium自動進(jìn)行百度搜索的實現(xiàn)9. PHP利用curl發(fā)送HTTP請求的實例代碼10. 資深程序員：給Python軟件開發(fā)測試的25個忠告！
網(wǎng)公網(wǎng)安備