計算DOM 元素中的行數

可以決定DOM 元素中文字的行數，但這需要一些考慮元素的樣式和尺寸。

自動插入DOM

文本中的自動換行符號並未直接在 DOM 本身中表示。 DOM 只包含原始文字內容。

根據元素高度計算行數

但是，如果元素的高度取決於其內容，則可以估計行數行的高度除以字體行高。

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

間距和填充的調整

請記住，填充和行間距會影響此計算的準確性。

範例

以下程式碼示範如何計算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 元素中的行數。