JavaScript与CSS实现HTML元素内文本每行字符数统计及限制

/* 定义一个基础容器宽度和字号 */
.max720 {
  width: 720px;
  font-size: 18px;
}

/* 将段落的最大宽度设置为50ch */
.max50ch p {
  max-width: 50ch; /* 每行最大宽度约为50个字符的宽度 */
}

<div class="max720 max50ch">
  <p><strong>每行最大约50个字符。</strong> 某日清晨，格里高尔·萨姆沙从不安的梦中醒来，发现自己躺在床上变成了一只巨大的甲虫。他仰卧在坚硬的背壳上，稍微抬起头，就能看到自己棕色的、微微隆起的腹部，被弓形的硬片分成若干节。</p>
  <p>被子几乎无法覆盖住他，随时都可能滑落。与身体其余部分相比，他那无数条可怜的细腿无助地挥舞着。他想：“我这是怎么了？”这并不是一个梦。</p>
</div>

<style>
/* 基础容器样式 */
.max720 {
  width: 720px;
  font-size: 18px;
  border: 1px solid #ccc; /* 添加边框以便观察 */
  padding: 10px; /* 添加内边距 */
}
</style>

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

<script>
document.addEventListener('DOMContentLoaded', () => {
  let paragraphs = document.querySelectorAll("p");

  paragraphs.forEach(function (paragraph, pIndex) {
    let originalText = paragraph.textContent; // 保存原始文本
    paragraph.textContent = ''; // 清空段落内容，以便我们逐字构建

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

    let lineSpan = document.createElement("span"); // 创建一个临时span来构建行
    lineSpan.style.whiteSpace = 'pre-wrap'; // 保持空格和换行符，并允许自动换行
    lineSpan.style.display = 'inline'; // 确保span是行内元素
    // 为了避免影响原始布局，可以考虑将lineSpan设置为绝对定位或在隐藏的区域进行操作
    // 但为了演示，我们直接插入并观察
    paragraph.appendChild(lineSpan); // 将span添加到段落中

    let charCount = 0;
    let lineNo = 1;
    let initialLineHeight = lineSpan.offsetHeight; // 获取初始行高

    // 如果初始lineSpan是空的，它的offsetHeight可能为0。
    // 为了确保能正确检测到第一行的高度，我们可以先添加一个字符或确保其有内容。
    // 更稳健的做法是检测lineSpan的父元素的行高或字体大小来估算。
    // 但在此例中，我们依赖逐字添加后offsetHeight的变化。

    // 如果段落是空的，或者第一个字符导致换行，initialLineHeight可能需要更精确的获取。
    // 我们可以通过CSS计算样式获取行高：
    let computedStyle = window.getComputedStyle(paragraph);
    let lineHeight = parseFloat(computedStyle.lineHeight);
    if (isNaN(lineHeight)) { // 如果lineHeight是'normal'，则根据font-size计算
        lineHeight = parseFloat(computedStyle.fontSize) * 1.2; // 常见默认行高倍数
    }
    let currentLineY = initialLineHeight > 0 ? initialLineHeight : lineHeight;


    textArr.forEach(function (char, i) {
      lineSpan.textContent += char; // 逐个添加字符

      // 强制浏览器重新计算布局，确保offsetHeight是最新的
      // 注意：这可能导致性能问题，但对于精确测量有时是必要的
      // lineSpan.offsetWidth; // 触发回流

      let currentSpanHeight = lineSpan.offsetHeight;

      // 如果当前span的高度大于当前行的基准高度，说明发生了换行
      // 或者如果是最后一个字符，也需要记录当前行的字符数
      if (currentSpanHeight > currentLineY || i === textArr.length - 1) {
        // 如果是换行，那么导致换行的那个字符实际上是下一行的第一个字符
        // 所以当前行的字符数是charCount - 1 (如果charCount > 0)
        let charsInCurrentLine = charCount;
        if (currentSpanHeight > currentLineY && charCount > 0) {
            charsInCurrentLine = charCount - 1;
        }

        if (charsInCurrentLine > 0 || (i === textArr.length - 1 && charCount > 0)) { // 确保只记录有字符的行
            console.log(`段落 ${pIndex + 1}; 行 ${lineNo}: ${charsInCurrentLine} 字符`);
        }

        // 重置计数器和基准行高
        currentLineY = currentSpanHeight;
        charCount = 0;
        lineNo++;

        // 如果是由于换行触发的，我们需要将当前字符作为新行的第一个字符重新计数
        if (currentSpanHeight > currentLineY) {
            lineSpan.textContent = char; // 将导致换行的字符作为新行的第一个字符
            charCount = 1;
        } else if (i === textArr.length - 1 && charsInCurrentLine === 0) {
            // 处理最后一个字符单独成行的情况
            console.log(`段落 ${pIndex + 1}; 行 ${lineNo}: 1 字符`);
        }
      }
      charCount++;
    });

    lineSpan.remove(); // 完成后移除临时span
    paragraph.textContent = originalText; // 恢复原始文本
  });
});
</script>