首行缩进两字符，CSStext-indent设置方法

中文排版常说“首行缩进两个汉字”，但 CSS 中没有“汉字单位”，2em 是最稳妥的近似值——它等于当前元素 font-size 的两倍，而中文字体在常规字号下，一个汉字宽度约等于 1em。

注意：这个换算不是绝对精确，尤其在等宽字体（如 monospace）或特殊字体（如思源黑体、PingFang SC）下，字宽可能略大于或小于 1em。

• 优先用 text-indent: 2em，而非固定像素（如 32px），以保证缩进随字号缩放
• 不要用 rem，因为 text-indent 是相对于自身 font-size 计算的，rem 反而会引入父级根字号干扰
• 如果必须像素精准（如设计稿严格要求 32px），可测出当前字体下“两个汉字”的实际宽度再设死值，但牺牲响应性

遇到 text-align: justify 时缩进消失？这是浏览器默认行为

当同时设置 text-indent 和 text-align: justify 时，部分浏览器（尤其是旧版 Safari 和某些 Android WebView）会忽略首行缩进，因为两端对齐算法优先处理整行间隙分配。

这不是 bug，而是规范允许的渲染差异。CSS Text Level 4 明确说明：text-indent 在 justified 文本中“may be ignored”。

• 若必须兼顾两端对齐与首行缩进，可用伪元素替代：p::first-line { text-indent: 2em; } 不起作用，但 p::before { content: "　　"; }（插入两个全角空格）更可靠
• 更现代的解法是用 margin-left 配合 display: inline-block 包裹首行文字，但会破坏流式布局
• 简单场景下，直接放弃 justify，改用 text-align: left —— 对中文阅读体验影响远小于缩进丢失

flex 或 grid 容器里的文本为何缩进失效

当文本所在元素是 display: flex 或 display: grid 的子项时，text-indent 仍有效，但容易被父容器的对齐方式覆盖或视觉遮蔽。

典型问题：父容器设了 align-items: center，子

虽有 text-indent，但因高度被拉伸、行高塌陷，导致缩进不可见。

• 确保文本容器本身有明确的 line-height 和足够高度，避免基线错位掩盖缩进
• 不要把 text-indent 和 padding-left 混用——后者会撑开容器，前者只移动文字位置
• 调试时可在容器上临时加 outline: 1px solid red，确认缩进区域是否被父布局裁剪

好了，本文到此结束，带大家了解了《首行缩进两字符，CSStext-indent设置方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！