当然可以实现这个需求！我给你分享两种靠谱的方法，其中第一种是最准确的，完全贴合浏览器的实际排版逻辑。

方法一：利用隐藏DOM元素实时测量（推荐） #

这是最准确的方法，因为我们直接让浏览器帮我们完成排版计算，完全模拟目标div的样式环境：

实现代码 #

function calculateLineCount(text, targetStyle) {
  // 创建一个隐藏的测试div，完全复刻目标元素的样式
  const testElement = document.createElement('div');
  
  // 复制目标样式，同时添加隐藏属性避免影响页面
  Object.assign(testElement.style, {
    ...targetStyle,
    position: 'absolute',
    visibility: 'hidden',
    top: '-9999px',
    left: '-9999px',
    // 确保排版逻辑和目标一致
    whiteSpace: 'normal',
    lineHeight: targetStyle.lineHeight || 'normal'
  });
  
  // 填充文本并添加到页面
  testElement.textContent = text;
  document.body.appendChild(testElement);
  
  // 计算行数：总滚动高度 ÷ 单行高度
  const singleLineHeight = testElement.clientHeight;
  const totalContentHeight = testElement.scrollHeight;
  const lineCount = Math.ceil(totalContentHeight / singleLineHeight);
  
  // 移除测试元素
  document.body.removeChild(testElement);
  
  return lineCount;
}

// 针对你给出的示例调用
const lineCount = calculateLineCount('abcdefghijk', {
  width: '15px',
  fontSize: '12px',
  overflow: 'hidden',
  display: 'block',
  overflowWrap: 'break-word'
});

console.log(lineCount); // 输出：3

为什么推荐这个方法？ #

• 完全模拟目标元素的排版环境，自动考虑所有CSS属性的影响（比如字体种类、字间距、行高、换行规则等）
• 结果和页面实际显示的行数完全一致，没有估算误差
• 代码逻辑简单易懂，兼容性好（支持所有现代浏览器）

方法二：Canvas字符宽度估算（适合简单场景） #

如果你不想操作DOM，可以用Canvas来测量每个字符的宽度，手动计算行数。但这个方法有局限性，只适合字体样式简单、没有复杂排版规则的场景：

实现代码 #

function calculateLineCountByCanvas(text, targetStyle) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  
  // 设置和目标元素一致的字体样式
  ctx.font = `${targetStyle.fontSize} sans-serif`;
  // 转换div宽度为数值
  const containerWidth = parseInt(targetStyle.width);
  
  let lineCount = 1;
  let currentLineWidth = 0;
  
  // 逐个字符计算宽度，累加判断是否换行
  for (const char of text) {
    const charWidth = ctx.measureText(char).width;
    if (currentLineWidth + charWidth > containerWidth) {
      lineCount++;
      currentLineWidth = charWidth;
    } else {
      currentLineWidth += charWidth;
    }
  }
  
  return lineCount;
}

// 示例调用
const lineCount = calculateLineCountByCanvas('abcdefghijk', {
  width: '15px',
  fontSize: '12px'
});

console.log(lineCount); // 输出：3

注意事项 #

• 这个方法无法处理复杂的CSS排版属性（比如letter-spacing、word-spacing、特殊字体的字符宽度差异），误差可能会比较大
• 只适合纯文本、无特殊排版需求的场景

内容的提问来源于stack exchange，提问作者Ar26