计算 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 元素中的行数。