::first-line 失效的根本原因是首行未被识别，如父元素为 flex、首字符为内联标签或存在 white-space: pre-line 等情况；text-transform 在其中支持 uppercase、lowercase、capitalize 等值，但对中文无效，且效果受换行位置和字体影响。
为什么::first-line加text-transform: uppercase有时没反应
根本原因不是写法错，而是首行压根没被识别出来。比如父容器是 display: flex 或开头有 <span></span>、<strong></strong> 这类内联元素，浏览器会认为“首行文本流”被中断，直接跳过 ::first-line 的样式计算——它静默失效，不报错也不提示。
常见触发失败的结构：
<p><span>这里是首行</span>后面还有文字...</p><div style="display: inline-block"><p>首行文字</p></div><p style="white-space: pre-line">首行内容<br>第二行</p>
实操建议：
- 确保父元素是
display: block（<p></p>默认满足） - 段落开头不要包裹任何标签，纯文本起始
- 避免在父级或祖先上设
font-size: 0或visibility: hidden，这会让首行“不可见”于伪元素逻辑
::first-line中text-transform能用哪些值
text-transform 在 ::first-line 中完全可用，但行为受文本内容本身约束。它只对可渲染的字符生效，不会改变 DOM 结构或语义。
支持的值包括：
-
uppercase：全部转为大写（英文有效，中文/日文无变化） -
lowercase：全部转小写（同上） -
capitalize：每个单词首字母大写（注意：按空格分词，标点后不触发） -
full-width：部分浏览器支持（如 Safari），将 ASCII 字符转全角，但兼容性差，不推荐用于生产 -
none：显式重置，可用于覆盖继承样式
注意：text-transform: uppercase 对数字、标点、汉字无效；若首行全是中文，加了也看不出变化。
中英文混排时首行大写失效的典型场景
问题不在 CSS，而在“首行”的判定边界随字体、字宽、容器宽度动态变化。比如一段含英文的中文段落，在桌面端首行可能是 “Lorem ipsum dolor sit”，到了手机端可能只剩 “Lorem”，这时 text-transform: uppercase 确实生效了，但你只看到一个词大写，误以为“没用”。
更隐蔽的问题是字体度量差异：中文字体通常没有大小写概念，而英文字体的 small-caps 或 uppercase 渲染依赖 baseline 对齐。若混用 font-family: "PingFang SC", Arial, sans-serif，某些浏览器（尤其是旧版 Safari）会在首行换行点附近错判字符归属。
应对方式：
- 用
@media (max-width: 480px)降级处理，比如小屏下取消text-transform，改用font-variant: small-caps（对英文更友好） - 避免依赖“首行一定含英文”，必要时手动加
<span class="lead-sentence"></span>做语义标记 - 测试时用固定宽度容器（如
width: 320px）+ 实际设备预览，别只靠开发者工具模拟
和::first-letter混用时的覆盖关系
如果同时写了 p::first-line { text-transform: uppercase; } 和 p::first-letter { font-size: 2em; }，两者不冲突——::first-letter 是 ::first-line 的子集，优先级相同，但浏览器会先应用 ::first-line 的 text-transform，再叠加 ::first-letter 的字体放大。这意味着首字母也会被转大写，且放大。
但要注意嵌套陷阱：
- 若首字母是标点（如引号
“），text-transform不影响它，但::first-letter仍会选中并放大 - 若首行第一个字符是
<ruby></ruby>标签（如注音），Safari 可能完全跳过::first-line计算，这是已知渲染偏差 - 不要在
::first-letter里再写text-transform，它会被::first-line覆盖，且无额外收益
真正容易被忽略的是：首行是否“存在”取决于真实渲染结果，而不是 HTML 源码。哪怕你写了十行文字，只要容器窄到只容一个词，那“首行”就真的只有一个词——text-transform 就只作用于那个词。别假设它有固定字符数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
