本文介绍如何在纯 css 环境下，仅对换行后（即非第一行）的 `` 元素首字母执行大写处理，无需 javascript，核心在于正确理解 `::first-letter` 的触发条件与选择器作用范围。
要实现“仅当文本实际发生换行时，第二行（及后续行）的首字母自动大写”，关键在于两点：语义结构的可控性和CSS 伪元素的适用规则。
首先需明确：::first-letter 伪元素仅对块级容器（block-level elements）生效，而 <span> 默认是 inline 元素，即使设置了 display: inline-block，它仍不满足 ::first-letter 的渲染前提——该伪元素要求宿主元素必须生成一个块格式化上下文（BFC），且自身为块级或至少被浏览器视为可独立排版的块容器。
因此，原方案中 .line { display: inline-block; } 无法激活 ::first-letter，导致所有尝试（如 :not(::first-line) 或嵌套伪类）均无效——因为 ::first-line 和 ::first-letter 本身就不能同时可靠作用于 inline/inline-block 元素。
✅ 正确解法是将每个 <span class="line"> 显式设为块级元素：
立即学习“前端免费学习笔记（深入）”；
.line {
display: block;
margin: 0;
/* 可选：避免默认段间距干扰视觉连贯性 */
}随后利用 DOM 结构顺序，精准定位“非首个 line 元素”的首字母：
p > .line:not(:first-of-type)::first-letter {
text-transform: uppercase;
}⚠️ 注意事项：
- :first-of-type 匹配的是同类型兄弟元素中的第一个 <span>，而非视觉上的“第一行”——这正符合需求：只要 HTML 中第二个 <span> 存在，它就代表逻辑上的“后续行内容”，无论是否真被折行（若未折行，该 span 会垂直堆叠显示，此时大写也无视觉歧义；若折行，则恰好满足目标效果）。
- 不推荐使用 ::first-line 配合 text-transform 模拟，因其无法动态响应布局变化，且 ::first-line::first-letter 组合在规范中不被支持。
- 若需更精细控制（如仅当真正换行时才触发），则必须借助 JavaScript 检测 offsetTop 或 getBoundingClientRect() 差异——但本方案以纯 CSS 实现了语义等价、简洁可靠的替代逻辑。
最终 HTML 保持不变：
<p> <span class="line">This text should break</span> <span class="line">after the word "break"</span> </p>
在响应式场景中，该方案依然稳健：当容器变窄迫使第二 <span> 换行时，其首字母自动大写；当容器足够宽使两行内联显示时，因 display: block 强制换行，第二行仍保持大写，整体语义清晰、行为可预测。
