前端开发：精确统计DIV元素中每行文本的字符数

.max720 {
  width: 720px; /* 设置容器固定宽度 */
  font-size: 18px; /* 设置字体大小 */
}

.max50ch p {
  max-width: 50ch; /* 限制段落每行最多50个字符宽 */
}

<div class="max720 max50ch">
  <p><strong>每行最多50个字符。</strong> 某天早晨，格雷戈尔·萨姆沙从不安的梦中醒来，发现自己躺在床上变成了一只巨大的甲虫。他仰卧在坚硬的背甲上，稍微抬起头，就能看到自己棕色的肚子，微微隆起，被弓形的硬壳分割成数段。</p>

  <p>床单几乎无法覆盖他的身体，似乎随时都会滑落。与身体的其余部分相比，他那无数条细弱的腿无助地挥舞着。他心想：“我这是怎么了？”这并不是一个梦。</p>
</div>

document.addEventListener('DOMContentLoaded', function() {
  let paragraphs = document.querySelectorAll("p"); // 获取所有段落元素

  paragraphs.forEach(function (paragraph, pIndex) {
    let originalText = paragraph.textContent;
    // 移除原始文本，避免在计算时影响布局
    paragraph.textContent = ''; 

    // 将文本拆分为字符数组
    let textArr = originalText.split("");

    // 创建一个临时的span元素，用于逐字符构建内容
    let lineBuilder = document.createElement("span");
    // 将lineBuilder插入到段落开头，用于测量
    paragraph.appendChild(lineBuilder); 

    let charCount = 0; // 当前行的字符计数
    let lineNo = 1;    // 行号
    let lastLineHeight = 0; // 记录上一行的offsetHeight

    // 强制浏览器渲染，获取初始行高（空span或第一个字符后的行高）
    // 在添加第一个字符前获取初始高度，避免空span的高度为0导致误判
    // 更好的做法是，先添加第一个字符，然后获取高度作为基准
    if (textArr.length > 0) {
        lineBuilder.textContent = textArr[0];
        lastLineHeight = lineBuilder.offsetHeight;
        charCount = 1;
        // 如果只有一个字符，则直接输出
        if (textArr.length === 1) {
            console.log(`段落 ${pIndex + 1}; 行 ${lineNo}: ${charCount} 字符`);
        }
    }


    // 从第二个字符开始遍历
    for (let i = 1; i < textArr.length; i++) {
      let char = textArr[i];
      lineBuilder.textContent += char; // 添加字符
      charCount++; // 字符计数加一

      let currentLineHeight = lineBuilder.offsetHeight; // 获取当前高度

      // 如果当前高度大于上一行高度，说明发生了换行
      if (currentLineHeight > lastLineHeight) {
        // 发生换行，则当前字符是新行的第一个字符
        // 所以前一行的字符数是 charCount - 1
        console.log(`段落 ${pIndex + 1}; 行 ${lineNo}: ${charCount - 1} 字符`);

        // 更新行号和基准高度
        lineNo++;
        lastLineHeight = currentLineHeight;
        charCount = 1; // 新行的第一个字符已计入
      }

      // 如果是最后一个字符，需要输出最后一行的计数
      if (i === textArr.length - 1) {
        console.log(`段落 ${pIndex + 1}; 行 ${lineNo}: ${charCount} 字符`);
      }
    }

    // 恢复段落的原始文本内容
    paragraph.textContent = originalText;
    // 移除临时的span元素
    lineBuilder.remove();
  });
});

<div class="max720">
  <p>某天早晨，格雷戈尔·萨姆沙从不安的梦中醒来，发现自己躺在床上变成了一只巨大的甲虫。他仰卧在坚硬的背甲上，稍微抬起头，就能看到自己棕色的肚子，微微隆起，被弓形的硬壳分割成数段。</p>

  <p>床单几乎无法覆盖他的身体，似乎随时都会滑落。与身体的其余部分相比，他那无数条细弱的腿无助地挥舞着。他心想：“我这是怎么了？”这并不是一个梦。</p>
</div>

/* 示例CSS，与HTML中的div配合 */
.max720 {
  width: 720px;
  font-size: 18px;
  border: 1px solid #ccc; /* 方便观察 */
  padding: 10px; /* 增加内边距，更接近实际布局 */
}

/* 确保span不影响布局，且能正确测量高度 */
.max720 p span {
  display: inline; /* 确保span是内联元素，能正常换行 */
  white-space: pre-wrap; /* 保留空白符和换行符 */
  word-break: break-word; /* 允许在单词内部换行 */
  /* 可以设置visibility: hidden; 但要确保它仍然占据空间，或使用position: absolute; left: -9999px; */
  /* 为了测量准确，最好是可见的，但可以设置为透明或背景色与父元素相同 */
}