p::first-line失效的根本原因是浏览器未生成行盒（line box），需满足块级元素、父容器不破坏BFC、首行无内联元素打断三条件；仅支持color、font-weight等有限文本属性，响应式下首行动态变化属正常行为。
::first-line 不是“选前几个字”，而是浏览器布局后动态计算出的视觉首行；它只对块级上下文生效，且仅支持有限文本属性——写错选择器或滥用布局属性，样式会静默失效，连控制台都不报错。
为什么 p::first-line 有时完全没反应
根本原因不是语法写错，而是浏览器压根没生成可匹配的行盒（line box）。以下情况会导致静默失效：
- 目标元素被父容器设为
display: flex或display: grid—— 这类布局直接关闭行盒生成能力 -
p元素本身被设为display: inline，或你误用在span、a等内联标签上 - 段落开头有不可见字符，比如
\u200b（零宽空格）或\u3000（中文全角空格），它们会提前截断行盒起始点 - 首行内嵌了
img、div或display: inline-block元素，破坏了内联格式化上下文（IFC）
li::first-line 怎么写才真正生效
直接写 ul::first-line 几乎总是无效，因为 ul 自身不渲染文本内容。必须落到 li 上，且确保它处于块级上下文中：
- 写成
li::first-line，不要加冗余前缀如ul li::first-line -
li默认是display: list-item，满足块级条件；但若被设为display: inline或float: left，就可能失效 - 避免在
li内使用white-space: nowrap，否则整条内容压成一行，“首行”等于全文，失去语义 - 如果
li内含图标（如::before）或span，只要它们不脱离内联流，li::first-line仍能作用于文字部分
::first-line 支持哪些 CSS 属性
它只接受影响「文本渲染结果」的属性，超出范围的声明会被浏览器静默丢弃——这不是 bug，是规范强制限制：
-
✅ 安全可用：
color、font-weight、font-size、text-transform、letter-spacing、line-height、background-color -
⚠️ 慎用：
text-shadow（旧版 Safari 可能不渲染）、background-color（若li内有inline-block子元素，覆盖可能不完整） -
❌ 明确禁用：
margin、padding、border、width、height、display、position—— 写了也白写
响应式下首行样式“跳变”是设计使然，不是 bug
::first-line 绑定的是「当前视口宽度下实际渲染出的第一行」，不是 HTML 源码里的前 N 个字符。这意味着：
- 桌面端首行可能是前 12 个汉字，缩到手机屏后只剩前 4 个，样式自动 applied 到新首行
- 中英文混排时因字体度量差异，断点可能偏移；别靠字符数预期效果
- 若小屏下首行只剩一个词（如“然而”），加粗后突兀，建议用媒体查询降级：
@media (max-width: 480px) { p::first-line { font-weight: normal; } } - 真正难调试的点在于：首行判定完全依赖最终 layout 结果，哪怕字体加载慢半拍，首行范围都可能偏移一两个像素
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
