JavaScript 如何計算文本的行數(shù)的實現(xiàn)
更新時間：2020年09月14日 10:12:26 作者：KASON
這篇文章主要介紹了JavaScript 如何計算文本的行數(shù)的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
需求：根據(jù)行數(shù)決定是否限制展開和收起。
思路：用2個塊統(tǒng)計行高，一個不加高度限制用來統(tǒng)計行數(shù)(css隱藏)，一個加高度限制用來顯示(加高度限制會導(dǎo)致統(tǒng)計行數(shù)不準(zhǔn))
要想知道文本的行數(shù)，那就需要知道文本的總高度和每一行的高度，總高度除以行高就是行數(shù)。當(dāng)然總高度的計算必須是文字所在的 DOM 沒有對高度的限制，隨著文本的增加 DOM 要隨之變高才行；最后還要考慮 DOM 的樣式padding和margin對高度的影響。這樣一來我們就可以計算出文本的行數(shù)了?？偨Y(jié)一下我們需要如下幾步：
- 克隆文本所在的 DOM；
- 清除 DOM 的高度限制；
- 獲取 DOM 的行高和高度；
- 計算行數(shù)；
- 去除克隆的 DOM。
相關(guān)代碼
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;
}
});
到此這篇關(guān)于JavaScript 如何計算文本的行數(shù)的實現(xiàn)的文章就介紹到這了,更多相關(guān)JavaScript 計算文本行數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
可以使用 e.stopPropagation(); e.preventDefault();來阻止事件冒泡，和默認(rèn)事件的執(zhí)行。但不能阻止事件的追加，如要追加，請看下面的實現(xiàn)方法2014-10-10
淺談在fetch方法中添加header后遇到的預(yù)檢請求問題
下面小編就為大家?guī)硪黄獪\談在fetch方法中添加header后遇到的預(yù)檢請求問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
JavaScript中字符串分割函數(shù)split用法實例
這篇文章主要介紹了JavaScript中字符串分割函數(shù)split用法,實例分析了javascript中split函數(shù)操作字符串的技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
這篇文章主要給大家介紹了關(guān)于JS拆箱轉(zhuǎn)換的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
這篇文章主要介紹了在HTML中使用JavaScript的兩種方法，幫助大家更好的理解和制作網(wǎng)頁，感興趣的朋友可以了解下2020-12-12
小程序根據(jù)手機機型設(shè)置自定義底部導(dǎo)航距離
這篇文章主要為大家詳細(xì)介紹了小程序根據(jù)手機機型設(shè)置自定義底部導(dǎo)航距離，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
這篇文章主要介紹了JS運算符簡單用法,結(jié)合實例形式詳細(xì)分析了JavaScript各種邏輯運算符、數(shù)學(xué)運算符、關(guān)系運算符等相關(guān)操作技巧,需要的朋友可以參考下2020-01-01
Javascript 檢測鍵盤按鍵信息及鍵碼值對應(yīng)介紹
Javascript中有3個事件句柄在對應(yīng)鍵盤的輸入狀態(tài):按鍵被按下（按下按鍵但還沒有抬起）、點擊按鍵（按下并抬起按鍵）、按鍵抬起（按鍵抬起之后）,接下來詳細(xì)介紹，感興趣的朋友可以了解下2013-01-01
JS 兩日期相減,獲得天數(shù)的小例子(兼容IE,FF)
這篇文章介紹了兩日期相減,獲得天數(shù)的小例子，有需要的朋友可以參考一下2013-07-07
JavaScript Serializer序列化時間處理示例
JavaScriptSerializer序列化時間后會把時間序列化成N進制的鬼數(shù)據(jù) ，下面有個示例，需要的朋友可以了解下2014-07-07