::first-line仅对块级元素的视觉首行生效，依赖BFC和行盒机制，受布局、字体、空格等影响，仅支持有限CSS属性，非精确控制工具。
::first-line 只对块级容器（如 p、div）的**视觉首行**生效，不是“HTML里前几个字”，也不是“第一个换行符之后”——它由浏览器在 layout 阶段动态计算，受 width、font-size、letter-spacing 等共同影响。写错选择器、套错元素、用错属性，样式都会静默失效。
必须用块级元素包裹，且不能被 flex/grid 破坏行盒
如果目标是 p 标签，直接写 p::first-line 没问题；但如果 p 被包在 display: flex 或 display: grid 的父容器里，部分浏览器（尤其是 Safari 和旧版 Chrome）会忽略 ::first-line。这不是 bug，而是规范要求：它依赖「块级格式化上下文（BFC）」和「行盒（line box）」生成机制。
- ✅ 安全写法：
<p>这是一段文字</p>+p::first-line { color: red; } - ❌ 危险写法：
<div style="display: flex"><p>...</p></div>—— 此时p的渲染行为被父级布局接管，首行逻辑可能中断 - ⚠️ 注意：
display: inline-block仍可触发 BFC，但若内容过短只占一行，::first-line就等于整段，容易误判“没效果”
只能用有限文本属性，background-color 是边界选项
::first-line 不是普通选择器，CSS 规范明确限制了可用属性。超出范围的声明会被浏览器静默丢弃，不报错也不提示。
- ✅ 安全可用：
color、font-weight、font-size、line-height、text-transform、letter-spacing、text-decoration - ✅ 条件可用：
background-color（所有现代浏览器支持），但background-image或background简写在 Safari 中可能断裂 - ❌ 完全无效：
margin、padding、border、width、height、display、position、transform - ⚠️ 特别注意：
text-indent虽然能用，但它作用于整段，不是::first-line的专属控制项；缩进会影响首行起始位置，但样式仍会应用
中文段落易因不可见字符或字体加载导致首行偏移
中文排版下，::first-line 失效常不是语法问题，而是“第一行”的计算被干扰。浏览器按实际像素宽度切分，而全角空格（\u3000）、零宽空格（\u200b）、标点悬挂、hyphens: auto 或自定义字体未就绪，都可能导致首行截断点意外移动。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- ? 排查方法：用 DevTools 的「Rendering」面板开启「Highlight updates」，缩放窗口或切换字体，观察高亮是否跳变
- ? 解决建议：用
white-space: normal（默认值）确保自然折行；避免手动敲多个空格对齐；检查 CMS 或 Markdown 渲染器是否注入了隐藏字符 - ? 替代思路：若需稳定控制“前 N 个字”，
::first-line无能为力，得靠 JS 提取首句或服务端加<span class="lead">包裹
动态内容插入后，首行样式不会自动重算？其实会，但有延迟
通过 innerHTML、Vue v-html 或 React dangerouslySetInnerHTML 插入新段落时，::first-line 样式通常能正确应用——因为浏览器会在 layout 阶段重新计算行盒。但有两个真实延迟点容易被忽略：
- ⏳ 字体加载：若用了
font-display: block，首行可能先以备用字体渲染，等自定义字体加载完才重绘，期间样式短暂错位 - ? resize 或 zoom：窗口缩放会触发重排，首行范围实时更新，但若 JS 监听
resize后立即读取getClientRects()，可能拿到旧尺寸 - ? 真正不重算的场景：用
display: none切换元素可见性，再display: block，此时首行样式会保留原计算结果，直到下一次 layout（比如滚动或 focus）
最复杂的地方在于：它不看 DOM 结构，只认渲染结果。你没法靠调试器“数字符”来预测哪几个字会被选中——缩放 125%、系统启用 macOS 的「粗体文本」辅助功能、甚至用户装了某款字体替换插件，都可能让首行内容突然变化。所以别把它当精确控制工具，而是当作一种轻量、响应式的视觉提示手段。
