本文介绍如何在纯 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 元素。
✅ 正确解法是将每个 显式设为块级元素：
立即学习“前端免费学习笔记（深入）”；
触发式加载精美特效企业网站源码使用jquery实现了很多精美的触发式加载特效，网站首页在随着访客的滚动条滚动过程中会出现很多触发式加载的特殊效果，让这个网站的风格瞬间显得非常的高大上，让你的企业品牌在访客心中留下更深的影响。当然，我们在使用jquery特效的同时也要注意程序对搜索引擎的友好型，所以这一点儿作者也有考虑到，已经尽可能的对js和css脚本进行精简和优化，尽可能的加快网站加载速度，同时也
.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 保持不变：
This text should break after the word "break"
在响应式场景中，该方案依然稳健：当容器变窄迫使第二 换行时，其首字母自动大写；当容器足够宽使两行内联显示时，因 display: block 强制换行，第二行仍保持大写，整体语义清晰、行为可预测。
