欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript 如何計(jì)算文本的行數(shù)的實(shí)現(xiàn)

 更新時(shí)間：2020年09月14日 10:12:26   作者：KASON  
這篇文章主要介紹了JavaScript 如何計(jì)算文本的行數(shù)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

需求：根據(jù)行數(shù)決定是否限制展開和收起。

思路：用2個(gè)塊統(tǒng)計(jì)行高，一個(gè)不加高度限制用來(lái)統(tǒng)計(jì)行數(shù)(css隱藏)，一個(gè)加高度限制用來(lái)顯示(加高度限制會(huì)導(dǎo)致統(tǒng)計(jì)行數(shù)不準(zhǔn))

要想知道文本的行數(shù)，那就需要知道文本的總高度和每一行的高度，總高度除以行高就是行數(shù)。當(dāng)然總高度的計(jì)算必須是文字所在的 DOM 沒(méi)有對(duì)高度的限制，隨著文本的增加 DOM 要隨之變高才行；最后還要考慮 DOM 的樣式padding和margin對(duì)高度的影響。這樣一來(lái)我們就可以計(jì)算出文本的行數(shù)了?？偨Y(jié)一下我們需要如下幾步：

  • 克隆文本所在的 DOM；
  • 清除 DOM 的高度限制；
  • 獲取 DOM 的行高和高度；
  • 計(jì)算行數(shù)；
  • 去除克隆的 DOM。

相關(guān)代碼

 document.getElementById("noticeContent").innerText = str;//展示的塊

 document.getElementById("noticeContent2").innerText = str;//計(jì)算行高的塊

 

 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) {//超過(guò)2行則顯示展開和收起

 this.showOmit = true;

 this.showOpen = true;

 } else {

 this.showOpen = false;

 }

 });

到此這篇關(guān)于JavaScript 如何計(jì)算文本的行數(shù)的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)JavaScript 計(jì)算文本行數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論