JavaScript 如何計算文本的行數(shù)的實現(xiàn)
更新時間：2020年09月14日 10:12:26 作者：KASON
這篇文章主要介紹了JavaScript 如何計算文本的行數(shù)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
需求：根據(jù)行數(shù)決定是否限制展開和收起。
思路：用2個塊統(tǒng)計行高，一個不加高度限制用來統(tǒng)計行數(shù)(css隱藏)，一個加高度限制用來顯示(加高度限制會導致統(tǒng)計行數(shù)不準)
要想知道文本的行數(shù)，那就需要知道文本的總高度和每一行的高度，總高度除以行高就是行數(shù)。當然總高度的計算必須是文字所在的 DOM 沒有對高度的限制，隨著文本的增加 DOM 要隨之變高才行；最后還要考慮 DOM 的樣式padding和margin對高度的影響。這樣一來我們就可以計算出文本的行數(shù)了?？偨Y(jié)一下我們需要如下幾步：
- 克隆文本所在的 DOM；
- 清除 DOM 的高度限制；
- 獲取 DOM 的行高和高度；
- 計算行數(shù)；
- 去除克隆的 DOM。
相關代碼
document.getElementById("noticeContent").innerText = str;//展示的塊
document.getElementById("noticeContent2").innerText = str;//計算行高的塊
this.$nextTick(() => {
let noticeDom = document.getElementById("noticeContent2");
console.log(noticeDom);
let style = window.getComputedStyle(noticeDom, null);
let row = Math.ceil(
Number(style.height.replace("px", "")) /
Number(style.lineHeight.replace("px", ""))
);//總行高 / 每行行高
console.log("noticeDom===>", style.height, style.lineHeight);
console.log("rowwwww", row);
if (row > 2) {//超過2行則顯示展開和收起
this.showOmit = true;
this.showOpen = true;
} else {
this.showOpen = false;
}
});
到此這篇關于JavaScript 如何計算文本的行數(shù)的實現(xiàn)的文章就介紹到這了,更多相關JavaScript 計算文本行數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
JavaScript數(shù)組去重是前端面試酷愛的問題，問題簡單而又能看出程序員對計算機程序執(zhí)行過程的理解如何。數(shù)組去重的方法有很多，到底哪種是最理想的我不清楚。于是我測試了下數(shù)組去重的效率。測試二十萬個數(shù)據(jù)，隨著數(shù)據(jù)越多效率很明顯的就體驗了出來。下面來一起看看吧。2016-10-10
本篇文章主要給大家詳細分析了js的作用域、預解析機制以及相關代碼分析，對此感興趣的朋友學習下吧。2018-02-02
ES6常用小技巧總結(jié)【去重、交換、合并、反轉(zhuǎn)、迭代、計算等】
這篇文章主要介紹了ES6常用小技巧,結(jié)合實例形式總結(jié)分析了ES6常見的數(shù)組去重、交換變量、合并數(shù)組、字符串反轉(zhuǎn)、數(shù)組迭代、數(shù)值計算等相關操作技巧,需要的朋友可以參考下2019-12-12
本文給大家詳細匯總了一下javascript中的數(shù)組方法，十分的全面細致，有需要的小伙伴可以參考下。2015-07-07
下面小編就為大家?guī)硪黄P于JS變量和作用域詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要為大家分享了js滑動提示效果代碼，實現(xiàn)方法簡單，感興趣的小伙伴們可以參考一下2016-03-03
js防抖函數(shù)和節(jié)流函數(shù)使用場景和實現(xiàn)區(qū)別示例分析
這篇文章主要介紹了js防抖函數(shù)和節(jié)流函數(shù)使用場景和實現(xiàn)區(qū)別,結(jié)合實例形式詳細分析了js防抖函數(shù)和節(jié)流函數(shù)基本功能、定義、用法區(qū)別及操作注意事項,需要的朋友可以參考下2020-04-04
JavaScript中的公有、私有、特權(quán)和靜態(tài)成員用法分析
這篇文章主要介紹了JavaScript中的公有、私有、特權(quán)和靜態(tài)成員用法,以實例形式分析了其使用方法,簡單易懂,對于初學javascript的朋友具有不錯的學習與借鑒價值,需要的朋友可以參考下2014-11-11
深入理解JavaScript系列（29）：設計模式之裝飾者模式詳解
這篇文章主要介紹了深入理解JavaScript系列（29）：設計模式之裝飾者模式詳解,裝飾者用用于包裝同接口的對象,不僅允許你向方法添加行為,而且還可以將方法設置成原始對象調(diào)用（例如裝飾者的構(gòu)造函數(shù)）,需要的朋友可以參考下2015-03-03
這篇文章用實例代碼講述了JavaScript如何獲取頁面圖片原始尺寸的方法，現(xiàn)在分享給大家供大家參考學習，有需要的可以一起來看看。2016-09-09