根据前一个<p>元素的宽度为HTML的p.indent元素设置左内边距

你猜的没错，纯CSS确实搞不定这个需求——毕竟CSS的选择器逻辑没法跳过中间的<h4>/<h5>元素去定位最近的普通<p>元素，更没法把那个元素的实际宽度值直接拿来当padding用。不过用几行JavaScript就能轻松实现，咱们一步步来：

实现思路 #

• 遍历所有带.indent类的<p>元素
• 对每个缩进元素，往前查找最近的非缩进普通<p>元素（自动跳过中间的标题元素）
• 获取找到的普通<p>的实际宽度，将其设为当前缩进元素的左内边距

代码实现 #

首先是基础版代码，适用于页面内容静态加载的场景：

// 获取所有需要设置缩进的段落
const indentParagraphs = document.querySelectorAll('p.indent');

indentParagraphs.forEach(para => {
  let currentPrev = para.previousElementSibling;
  // 循环往前查找，直到找到目标普通p元素
  while (currentPrev) {
    if (currentPrev.tagName === 'P' && !currentPrev.classList.contains('indent')) {
      break;
    }
    currentPrev = currentPrev.previousElementSibling;
  }
  // 如果找到对应元素，设置左内边距
  if (currentPrev) {
    para.style.paddingLeft = `${currentPrev.offsetWidth}px`;
  }
});

如果你的页面是动态加载内容，或者窗口大小变化会导致元素宽度改变，可以用下面的增强版，确保缩进始终准确：

function updateIndentPadding() {
  const indentParagraphs = document.querySelectorAll('p.indent');
  
  indentParagraphs.forEach(para => {
    let currentPrev = para.previousElementSibling;
    while (currentPrev) {
      if (currentPrev.tagName === 'P' && !currentPrev.classList.contains('indent')) {
        break;
      }
      currentPrev = currentPrev.previousElementSibling;
    }
    if (currentPrev) {
      para.style.paddingLeft = `${currentPrev.offsetWidth}px`;
    }
  });
}

// 页面加载完成后初始化缩进
document.addEventListener('DOMContentLoaded', updateIndentPadding);
// 窗口大小变化时重新计算缩进
window.addEventListener('resize', updateIndentPadding);

补充说明 #

• 这里用offsetWidth获取元素的实际宽度（包含边框和内边距），如果只需要内容区域的宽度，可以换成clientWidth（不含边框），根据你的排版需求调整即可。
• 这段代码会自动忽略中间的<h4>/<h5>等元素，精准定位到最近的上一个普通段落，完全匹配你剧本排版的需求。

备注：内容来源于stack exchange，提问作者thecommexokid