在 chrome 中，`::first-letter` 伪元素与 `-webkit-line-clamp` 同时使用时可能失效，导致首字母无法大写；本文提供兼容性强、无需 javascript 的纯 css 解决方案。
当需要同时实现「多行文本截断（line clamp）」和「首字母大写（capitalize first letter）」时，开发者常会尝试组合使用 .line-clamp（基于 -webkit-box 的截断）与 ::first-letter { text-transform: uppercase }。然而，Chrome（包括最新稳定版）存在一个已知限制：::first-letter 在 display: -webkit-box 容器中无法正确触发——即使 Firefox 和 Safari 支持良好，Chrome 会忽略该伪元素样式，导致首字母保持小写。
✅ 正确解法：分离语义与布局逻辑
核心思路是：避免将 ::first-letter 应用于被 -webkit-line-clamp 直接控制的同一元素。因为 -webkit-box 布局会破坏部分伪元素的渲染上下文。推荐采用「结构化分层」方案：
- 外层容器负责行数限制（启用 line-clamp）；
- 内层 或独立 承载文本并应用首字母样式。
以下是经过验证的、跨浏览器（Chrome / Firefox / Safari）兼容的实现：
this text should have a capital letter and only 5 rows....line-clamp-5 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; /* 可选：设置固定宽高或 max-height 配合 */ } .capitalize-first { /* 确保 span 是内联元素且可被 ::first-letter 识别 */ display: inline; } .capitalize-first::first-letter { text-transform: uppercase; }⚠️ 注意事项：::first-letter 仅对块级或 display: inline 的可替换/非替换元素生效，不能作用于 display: -webkit-box 元素本身；若文本由多个段落组成（如 列表），应为每个段落单独包裹 .capitalize-first，而非在外层统一应用；不要滥用 !important（如答案中建议的 capitalize!important），它掩盖了根本原因，且易引发维护问题；text-transform: capitalize 与 uppercase 区别：前者仅首字母大写（适合句子），后者全大写；此处推荐 capitalize 更语义准确。
✅ 替代方案（无伪元素，更可控）
若需更高兼容性或支持 IE（已不推荐），可用 text-transform: capitalize 直接作用于整个文本容器（注意：它会将每个单词首字母大写，非仅句首）：
立即学习“前端免费学习笔记（深入）”；
.line-clamp-5 .capitalize-sentence { text-transform: none; /* 重置可能的继承 */ } .line-clamp-5 .capitalize-sentence::before { content: attr(data-first) " "; text-transform: uppercase; } .line-clamp-5 .capitalize-sentence { /* 需配合 JS 设置 data-first 属性，或服务端注入 */ }但该方式需额外数据处理，纯 CSS 推荐仍以上述 span + ::first-letter 分离方案为最佳实践。
总结
方案 兼容性 维护性 推荐度 ❌ ::first-letter 直接作用于 .line-clamp 元素 Chrome 失效 高（代码简洁） ⚠️ 不推荐 ✅ span 封装文本 + 外层 line-clamp Chrome/Firefox/Safari 全支持 高（结构清晰） ✅ 强烈推荐 ? text-transform: capitalize 全局应用 全浏览器 中（语义略弱） ✅ 适用简单场景 最终，只需两步即可解决：用 包裹文本内容，并将 ::first-letter 样式移至该 上——无需修改 HTML 结构本质，也无需引入 JavaScript 或复杂 hack。
