在 chrome 中，`::first-letter` 伪元素与 `-webkit-line-clamp` 同时使用时存在渲染冲突，导致首字母无法正确大写；本文提供兼容主流浏览器（chrome/firefox/safari）的可靠实现方案。
当需要同时满足「首字母大写」和「严格限制为最多 5 行文本」两个需求时，直接组合 .capitalize-first-letter::first-letter { text-transform: uppercase; } 与 .line-clamp 类（基于 -webkit-box 的多行截断）看似合理，但在 Chrome（包括最新稳定版）中会失效——::first-letter 样式被忽略，首字母保持小写。根本原因在于：-webkit-line-clamp 是一种“裁剪渲染”机制，它会干扰 ::first-letter 的文本节点解析时机，尤其在 Chrome 的 Blink 引擎中表现明显；而 Firefox（Gecko）对此兼容性更好，因此出现跨浏览器不一致。
✅ 正确解法：避免依赖 ::first-letter 与 line-clamp 共存，改用更可控、语义清晰的双重策略：
- 对首字母大写：使用 text-transform: capitalize（作用于首单词首字母）或 JavaScript 动态处理（确保真正只大写第一个字母）；
- 对行数限制：保留 -webkit-line-clamp，但需确保其容器结构纯净、无干扰布局。
以下是推荐的生产级 CSS + HTML 方案（无需 JS，纯 CSS，全浏览器兼容）：
.line-clamp-capitalize {
/* 多行截断核心 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden;
/* 首字母大写（注意：capitalize 会大写每个单词首字母；若仅需第一个字母，见下方说明） */
text-transform: capitalize;
/* 可选：修复部分字体下基线偏移 */
line-height: 1.4;
word-break: break-word;
}
/* 若严格要求「仅第一个字母大写，其余全小写」，则禁用 text-transform，改用 JS 或服务端处理；
但多数场景中 capitalize 已满足 UX 需求（如标题、摘要类文本） */<div class="line-clamp-capitalize" style="width: 200px; font-size: 14px;"> this text should have a capital letter and only 5 rows... this text should have a capital letter and only 5 rows... this text should have a capital letter and only 5 rows... this text should have a capital letter and only 5 rows... this text should have a capital letter and only 5 rows... this text should have a capital letter and only 5 rows... </div>
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- text-transform: capitalize 会将每个单词首字母大写（如 "hello world" → "Hello World"）。若原文本含多个单词且只需首个字符大写（如 "hello world" → "Hello world"），CSS 无法原生实现，必须借助 JavaScript（例如：el.textContent = el.textContent.replace(/^./, c => c.toUpperCase());）；
- 确保 .line-clamp-capitalize 容器无内联 white-space: nowrap 或 display: inline 等干扰属性，否则 line-clamp 失效；
- 在 Safari 中需添加 -webkit-line-clamp，现代版本已默认支持；Firefox 自 68+ 原生支持 line-clamp（无需前缀），但建议保留 -webkit- 以覆盖旧版；
- 不推荐答案中提出的“拆分为多个 <div> + :nth-child(n+6) { display: none }”方案——它破坏语义（将一段连续文本硬切为多个块）、不可访问（屏幕阅读器无法连贯朗读）、且无法真正“截断溢出”，仅是隐藏 DOM 节点，不符合 WCAG 与响应式设计原则。
总结：放弃 ::first-letter 与 line-clamp 的危险组合，拥抱 text-transform: capitalize 这一轻量、标准、高兼容的替代方案。如业务逻辑强制要求「单字母大写 + 多行截断」，应在数据层或组件初始化时做字符串预处理，而非依赖 CSS 伪元素博弈渲染引擎。
