JavaScriptはどのようにテキストの行数を計算しますか?
1630 ワード
需要:行数によって、展開と収束を制限するかどうかを決めます。
考え方:2つのブロックで行を統計するのは高くて、一つは高さ制限を加えずに統計の行数(css隠し)を表します。一つは高さ制限を加えて表示します。(高さ制限を加えると統計の行数が不正確になります。)
テキストの行数を知るには、テキストの高さと行の高さを知る必要があります。総高さを行の高さで割ると行数です。もちろん、全高度の計算は文字があるDOMで高度の制限がないといけません。テキストの増加に伴ってDOMは高くなります。最後にDOMのパターンpaddingとmarginの高さへの影響も考慮しなければならない。これでテキストの行数を計算できます。まとめてみます。次のステップが必要です。クローニングテキストがあるDOM; は、DOMの高さ制限をクリアする。 は、DOMの行の高さと高さを取得する。 行数を計算します。 は、クローンのDOMを除去する。 関連コード
考え方:2つのブロックで行を統計するのは高くて、一つは高さ制限を加えずに統計の行数(css隠し)を表します。一つは高さ制限を加えて表示します。(高さ制限を加えると統計の行数が不正確になります。)
テキストの行数を知るには、テキストの高さと行の高さを知る必要があります。総高さを行の高さで割ると行数です。もちろん、全高度の計算は文字があるDOMで高度の制限がないといけません。テキストの増加に伴ってDOMは高くなります。最後にDOMのパターンpaddingとmarginの高さへの影響も考慮しなければならない。これでテキストの行数を計算できます。まとめてみます。次のステップが必要です。
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がどのようにテキストの行数を計算するかについての文章を紹介します。JavaScriptに関する計算テキストの行数内容は以前の文章を検索したり、下記の関連記事を引き続き閲覧したりしてください。これからもよろしくお願いします。