本文介绍如何在纯 css 环境下，仅对换行后（即非第一行）的 `` 元素首字母执行大写处理，无需 javascript，核心在于正确理解 `::first-letter` 的触发条件与选择器作用范围。
要实现“仅当文本实际发生换行时，第二行（及后续行）的首字母自动大写”，关键在于两点：语义结构的可控性和CSS 伪元素的适用规则。
首先需明确：::first-letter 伪元素仅对块级容器（block-level elements）生效，而 默认是 inline 元素，即使设置了 display: inline-block，它仍不满足 ::first-letter 的渲染前提——该伪元素要求宿主元素必须生成一个块格式化上下文（BFC），且自身为块级或至少被浏览器视为可独立排版的块容器。
因此，原方案中 .line { display: inline-block; } 无法激活 ::first-letter，导致所有尝试（如 :not(::first-line) 或嵌套伪类）均无效——因为 ::first-line 和 ::first-letter 本身就不能同时可靠作用于 inline/inline-block 元素。
✅ 正确解法是将每个 显式设为块级元素：
立即学习“前端免费学习笔记（深入）”；
需要创建、读取、编辑或处理 Word 文档（.docx / .dotx）时使用。触发词：'Word'、'word 文档'、'.docx'、'生成报告'、'制作合同/简历/方案/说明书'、'提取 word 内容'、'在文档里查找替换'、'给文档加页眉页脚/目录/表格'。也用于把任意内容排版成一份正式的 Word 文件。不要用它处理 PDF、Excel 或无关编程任务。中文创作场景尤其适合：小说大纲稿、投稿文档、合同、简历、工作总结。
.line {
display: block;
margin: 0;
/* 可选：避免默认段间距干扰视觉连贯性 */
}随后利用 DOM 结构顺序，精准定位“非首个 line 元素”的首字母：
p > .line:not(:first-of-type)::first-letter {
text-transform: uppercase;
}⚠️ 注意事项：
- :first-of-type 匹配的是同类型兄弟元素中的第一个 ，而非视觉上的“第一行”——这正符合需求：只要 HTML 中第二个 存在，它就代表逻辑上的“后续行内容”，无论是否真被折行（若未折行，该 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>
在响应式场景中，该方案依然稳健：当容器变窄迫使第二 换行时，其首字母自动大写；当容器足够宽使两行内联显示时，因 display: block 强制换行，第二行仍保持大写，整体语义清晰、行为可预测。
