使用::before插入文字时需设display为block或inline-block并配white-space:normal或pre-wrap，同时设置width/max-width，content中换行需用\A或pre-wrap多行字符串。
在使用 ::before 伪元素插入文字时，若内容含空格或换行符但未按预期折行，通常是因为伪元素默认为 inline 显示，且 white-space 的默认行为（normal）会合并空白、忽略换行。解决关键在于显式控制显示模式与空白处理规则。
确保 display 设置为 block 或 inline-block
::before 默认是 inline，不支持 width、text-align 等块级特性，也影响换行表现。若需文字在指定宽度内自动折行，必须设为块级上下文：
- 用
display: block—— 适合独占一行、需设置宽高/对齐的场景 - 用
display: inline-block—— 适合与前后文本同行，但仍需内部换行控制 - 避免只写
display: inline（默认值），它会忽略width和多数换行相关样式
配合 white-space 控制换行与空白行为
仅改 display 不够，还需匹配合适的 white-space 值：
-
white-space: normal—— 允许换行，合并连续空白（推荐大多数情况） -
white-space: pre-wrap—— 保留源码中的换行符和空格，同时允许容器内自动折行（适合带手动换行的提示文案） - 避免
white-space: nowrap（强制不换行）或pre（保留空白但不自动折行）
记得设置 width 或 max-width（尤其 display: block 时）
若伪元素内容过长却不换行，很可能是没有限制宽度——block 元素默认撑满父容器，但换行触发依赖「可用宽度」：
立即学习“前端免费学习笔记（深入）”；
- 加上
width: 200px或max-width: 100%，让浏览器知道在哪截断 - 若父容器无固定宽，考虑用
max-width: fit-content或配合word-break: break-word处理超长单词
检查 content 中是否误用了转义或不可见字符
伪元素的 content 值若来自 CSS 字符串（如 content: "第一行\n第二行"），CSS 并不解析 \n 为换行——它只是普通字符。真想换行得：
- 用
white-space: pre-wrap+ 实际换行（即写成多行字符串，注意缩进会影响显示） - 或用 Unicode 换行符：
content: "第一行" "\A" "第二行";，再配white-space: pre或pre-wrap - 更稳妥的做法：把多行文本拆到多个伪元素，或改用 HTML 内容 + CSS 控制
