CSS设置white-space:pre时保留制表符并去除HTML代码缩进的方法

核心矛盾是white-space: pre/pre-wrap会保留所有空白字符，包括写HTML时为了代码可读性添加的层级缩进——这类缩进是所有诗歌行共有的前置空白，原生CSS没有直接移除这类公共空白的属性，以下是按实用性排序的解决方案：

不需要调整现有HTML书写格式，也不用手动修改每一行诗歌，脚本会自动识别代码编写产生的公共缩进并移除，完整保留诗歌内部的排版空格、制表符和换行。
首先配置基础CSS：

.poem1 p {
    white-space: pre-wrap; /* 保留空格、换行，超出容器宽度的长文本自动换行 */
    tab-size: 2; /* 若用制表符做诗歌排版，可按需设置制表符显示宽度 */
}

页面加载时执行以下脚本，自动处理所有诗歌段落：

document.addEventListener('DOMContentLoaded', () => {
    // 可根据实际的诗歌容器class修改选择器
    document.querySelectorAll('.poem1 p').forEach(paragraph => {
        const lines = paragraph.textContent.split('\n');
        // 计算所有非空行的最小前置缩进长度
        const minIndent = lines
            .filter(line => line.trim().length > 0)
            .map(line => line.match(/^[\s]*/)[0].length)
            .reduce((minVal, currentLen) => Math.min(minVal, currentLen), Infinity);
        // 移除每一行的公共缩进，清理首尾多余空行
        const formattedContent = lines
            .map(line => line.slice(minIndent))
            .join('\n')
            .trim();
        paragraph.textContent = formattedContent;
    });
});

这个方案兼容性好，不管HTML代码缩进用的是空格还是制表符、缩进量是多少，都能准确识别公共缩进，不会误删诗歌本身的排版格式。

如果不想引入JS，且所有诗歌段落的代码缩进量固定（比如示例中p标签内的内容统一缩进了8个空格），可以用负外边距抵消多余偏移，注意必须搭配等宽字体保证缩进宽度计算准确：

.poem1 p {
    white-space: pre;
    font-family: "Courier New", monospace; /* 等宽字体保证ch单位精度 */
    /* 数值根据实际代码缩进量调整，示例中8个空格对应8ch */
    margin-left: -8ch;
}

这个方案的缺点是灵活性差：后续调整HTML缩进、更换非等宽字体时，偏移量会失准，需要重新调整数值。

你提到的两种手动调整方式虽然能实现效果，但维护成本太高：

• 把white-space设为pre-line后手动在需要缩进的位置插入 ：诗歌篇幅大、数量多时重复工作量极高
• 手动删除HTML中的代码缩进：破坏HTML代码的排版结构，可读性差，后续修改维护麻烦

内容的提问来源于stack exchange，提问作者MingLi