DOM 要素内の行数を数える

DOM 要素内のテキストの行数を決定することは可能ですが、いくつかの考慮が必要です。

DOM の自動改行

テキスト内の自動改行は、DOM 自体では直接表現されません。 DOM には生のテキスト コンテンツのみが含まれます。

要素の高さに基づいて行数を数える

ただし、要素の高さがコンテンツに依存する場合は、その数を見積もることができます。高さをフォント行の高さで割った行数。

var divHeight = document.getElementById('content').offsetHeight;
var lineHeight = document.getElementById('content').style.lineHeight;
var lines = divHeight / lineHeight;

間隔とパディングの調整

パディングと行間の間隔は、この計算の精度に影響する可能性があることに注意してください。

Example

次のコードは、行の高さを設定して div 要素の行数をカウントする方法を示しています。

  hello how are you? hello how are you? hello how are you? hello how are you?

function countLines() {
  var el = document.getElementById('content');
  var divHeight = el.offsetHeight;
  var lineHeight = parseInt(el.style.lineHeight);
  var lines = divHeight / lineHeight;
  alert("Lines: "   lines);
}

このコードは、div 要素の行数を示すアラートを表示します。