前端开发中计算HTML元素每行字符数的方法：CSS与JavaScript实践

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

.max50ch p {
  max-width: 50ch; /* 限制段落的最大宽度为50个字符宽度 */
}

<div class="max720 max50ch">
  <p><strong>Max 50 characters per line.</strong> One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>

  <p>The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought. It wasn't a dream.</p>
</div>

// 获取页面中所有的段落元素
let paragraphs = document.querySelectorAll("p");

// 遍历每个段落进行处理
paragraphs.forEach(function (paragraph, pIndex) {
  let text = paragraph.textContent; // 获取段落的完整文本内容
  let textArr = text.split(""); // 将文本分割成字符数组

  // 创建一个临时的span元素，用于逐个添加字符并监测高度
  let lineSpan = document.createElement("span");
  lineSpan.style.display = 'inline'; // 确保span是行内元素，以便正确模拟文本流
  paragraph.insertBefore(lineSpan, paragraph.firstChild); // 将span插入到段落的开头

  let charCount = 0; // 记录当前行的字符数
  let lineNo = 1; // 记录行号
  let lineY = lineSpan.offsetHeight; // 记录当前行的初始高度

  // 遍历每个字符
  textArr.forEach(function (char, i) {
    lineSpan.textContent += char; // 将字符添加到临时span中
    charCount++; // 字符计数加一

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

    // 判断是否发生换行：
    // 1. currentY > lineY：表示高度增加，发生了换行
    // 2. i == textArr.length - 1：处理最后一个字符，确保最后一行的字符数也被统计
    if (currentY > lineY || i === textArr.length - 1) {
      // 如果是换行，则前一行的字符数是 charCount - 1 (因为当前字符导致了换行)
      // 如果是最后一个字符且未换行，则 charCount 是最后一行的字符数
      let charPerLine = (i === textArr.length - 1 && currentY === lineY) ? charCount : charCount - 1;

      console.log(`段落 ${pIndex + 1}; 第 ${lineNo} 行: ${charPerLine} 个字符`);

      lineY = currentY; // 更新行高基准
      charCount = (i === textArr.length - 1 && currentY === lineY) ? charCount : 0; // 重置字符计数，如果最后一个字符未换行则保留，否则归零
      lineNo++; // 行号加一
    }
  });
  // 移除临时span元素
  lineSpan.remove();
});

.max720 {
  width: 720px;
  font-size: 18px;
}

<div class="max720">
  <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>

  <p>The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought. It wasn't a dream.</p>
</div>