必须用text-indent控制弹窗文字首行缩进，因直接敲空格会被浏览器压缩、缩进不随字体缩放、污染语义；正确做法是给块级容器设text-indent:2em，避免px单位及内联元素使用。
弹窗文字首行空格不能靠敲空格或 硬塞，必须用 text-indent 控制，否则缩进错位、响应式失效、屏幕阅读器误读。
为什么直接敲空格或 在弹窗里不管用
浏览器默认会把连续空格（包括 ）压缩成一个，且缩进量固定为像素或字符数，不随字体大小缩放。弹窗内容常是动态插入的富文本，HTML 里混空格还会污染语义、增加维护成本。
常见错误现象：
- 写
这是一段话，结果只缩进一个汉字宽度，放大页面后缩进变小 - 用
white-space: pre强行保留空格，但整段文字失去自动换行能力，弹窗宽度窄时文字溢出 - 在
div或span上设text-indent没反应——因为这些元素默认是 inline，不支持该属性
正确做法：给弹窗内容容器设 text-indent
确保弹窗正文是块级元素（如 p、div），再用 text-indent 控制首行缩进。值推荐用 2em，它随当前字体大小等比缩放，兼容所有现代浏览器。
实操建议：
- 如果弹窗内容用
p标签包裹，直接加样式：p { text-indent: 2em; } - 如果是
div，需先确认它是块级：.popup-content { display: block; text-indent: 2em; } - 避免用
px（如text-indent: 32px），缩放页面时会错位 - 若弹窗内有多个段落，每段都会独立缩进；如只需第一段缩进，给首个
p加 class 单独控制
富文本弹窗中 text-indent 不生效的排查点
CMS 或编辑器输出的内容常包裹在 div 里，且可能被全局 CSS 重置掉 text-indent。这时要检查：
- 父容器是否设置了
display: inline或inline-block？必须改为block才生效 - 是否被其他样式覆盖？用浏览器开发者工具看 computed 样式里
text-indent是否为0或initial - 内容是否被
span或code等内联标签包裹？text-indent对内联子元素无效，得作用在最外层块容器上 - 某些编辑器（如 Quill）输出的 HTML 可能没闭合
p标签，导致结构不合法，text-indent失效
真正难处理的是嵌套在 iframe 或 Shadow DOM 里的弹窗，text-indent 会被作用域隔离；这种场景得在对应上下文内单独注入样式，不能只靠外层 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
