完全可行，这是实现“左右对齐+首行缩进”的标准组合；text-align: justify 与 text-indent 可共存且兼容 IE8+，但需确保作用于块级元素、避免 flex/grid 父容器干扰，并推荐用 2em 实现响应式中文缩进。
text-align: justify + text-indent 组合使用是否可行
完全可行，这是实现“左右对齐+首行缩进”的标准组合。但要注意：text-align: justify 本身不干扰 text-indent，两者可共存，且浏览器支持极好（IE8+ 都支持）。
常见错误现象：设置了 text-align: justify 后首行没缩进——大概率是忘了加 text-indent，或作用在了行内元素（如 span）上。
-
text-align: justify只对多行文本生效；单行文本两端对齐效果不可见（浏览器会忽略） -
text-indent必须作用于块级元素（p、div、blockquote等），不能直接写在span上 - 若段落只有一行，
text-indent仍生效，但justify无视觉表现
为什么用 2em 而不是 2ch 或 px 实现“两个汉字”缩进
2em 是当前最平衡的选择：它随 font-size 缩放，适配响应式场景，且在多数中文字体（如 Microsoft YaHei、Noto Sans CJK）下视觉接近两字符宽度。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
2ch取的是 “0” 字符宽度，在中文环境里远小于一个汉字（尤其在非等宽字体下），实测常缩进不足 1 字 -
20px在高 DPI 屏幕或系统字体放大时会显得过小，且无法随字号动态调整 - 百分比单位（如
4%）依赖父容器宽度，和字体无关，极易错位——比如容器宽 1000px 时缩进 40px，换到窄屏就只剩 12px
flex/grid 容器里 text-indent 失效怎么办
当 p 标签是 display: flex 或 display: grid 的直接子元素时，text-indent 常常不生效——这不是 bug，而是 CSS 格式化上下文变更导致块级盒行为被覆盖。
实操建议：
- 优先改用
padding-left: 2em模拟缩进，更稳定，且不影响文本流 - 若必须保留
text-indent，给p显式加display: block，并确认没被align-self或justify-content干扰 - 避免在导航菜单、卡片标题等本就不该有段落语义的地方硬套
text-indent——那本质是间距问题，该用margin-left或padding-left
line-height 过小会导致缩进后文字“粘连”
text-indent 只移动首行起始位置，不改变行高计算逻辑。当 line-height 设置过小（例如 line-height: 1），首行文字可能和第二行在视觉上挤在一起，尤其在字号较大（如 font-size: 20px）时更明显。
推荐做法：
- 中文排版建议
line-height≥1.5（正文常用1.6～1.8） - 若必须压缩行高，请同步微调
margin-bottom补偿视觉间隙 - 不要指望靠增大
text-indent来“拉开”行距——它解决不了行高问题
真正麻烦的是打印样式和 PDF 导出：不同引擎（WebKit、Blink、PagedJS）对 text-indent 和 justify 的渲染细节不一致，尤其是断行位置变化后，首行缩进可能跳到第二页开头。实测前务必用目标输出通道验证。
