前端开发中 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', () => {
  let paragraphs = document.querySelectorAll(".max720 p"); // 选择目标段落

  paragraphs.forEach(function (paragraph, pIndex) {
    let text = paragraph.textContent;
    let textArr = text.split(""); // 将文本分割成字符数组

    // 创建一个临时的span元素来逐个添加字符并检测换行
    let lineDetector = document.createElement("span");
    lineDetector.style.whiteSpace = 'pre-wrap'; // 确保空格和换行被正确处理
    lineDetector.style.display = 'inline-block'; // 确保能检测到高度变化
    lineDetector.style.wordBreak = 'break-word'; // 确保长单词也能正常换行

    // 将临时span插入到段落内部，以便继承样式和布局
    paragraph.insertBefore(lineDetector, paragraph.firstChild);

    let charCount = 0; // 当前行的字符计数器
    let lineNo = 1;    // 行号
    let lineY = lineDetector.offsetHeight; // 初始行高度，用于检测变化

    // 遍历所有字符
    textArr.forEach(function (char, i) {
      lineDetector.textContent += char; // 添加当前字符
      charCount++;

      let currentY = lineDetector.offsetHeight; // 获取添加字符后的高度

      // 如果高度发生变化（表示换行）或者已经是最后一个字符
      if (currentY > lineY || i === textArr.length - 1) {
        let actualCharCount;
        if (currentY > lineY) { // 当前字符导致了换行
          actualCharCount = charCount - 1; // 上一行的字符数是 charCount-1
          // 回溯：将导致换行的字符从 lineDetector 中移除，以获取上一行的精确内容
          lineDetector.textContent = lineDetector.textContent.slice(0, -1);
          console.log(`段落 ${pIndex + 1}; 行 ${lineNo}: ${actualCharCount} 字符`);

          // 为新行做准备：将导致换行的字符作为新行的第一个字符
          lineDetector.textContent = char;
          charCount = 1;
          lineY = currentY; // 更新基准高度
          lineNo++;
        } else { // 最后一个字符，且它没有导致换行
          actualCharCount = charCount; // 当前行（也是最后一行）的字符数
          console.log(`段落 ${pIndex + 1}; 行 ${lineNo}: ${actualCharCount} 字符`);
        }
      }
    });
    // 移除临时span元素
    lineDetector.remove();
  });
});

<div class="max720">
  <p>某天早晨，格里高尔·萨姆沙从不安的梦中醒来，发现自己躺在床上，变成了一只巨大的甲虫。他仰卧在坚硬的背甲上，稍微抬起头，就能看到自己棕色的、略微拱起的腹部，被弓形的硬节分割成几段。</p>
  <p>被子几乎无法盖住他，似乎随时都会滑落。与身体的其余部分相比，他那许多细小的腿无助地挥舞着。“我这是怎么了？”他想。这不是梦。</p>
</div>

.max720 {
  width: 720px;
  font-size: 18px;
  border: 1px solid red; /* 添加边框以便观察 */
}