text-transform: capitalize 作用于每个单词首字母而非仅句子首字母，如“hello world”变为“Hello World”；对连字符词、缩写处理有局限，需JS配合toLocaleUpperCase('en-US')精确控制首字母大写。
text-transform: capitalize 只作用于单词首字母，不是句子首字母
很多人以为 text-transform: capitalize 能让整句第一个字母大写，其实它对每个单词都生效。比如 "hello world" 会变成 "Hello World"，而不是 "Hello world"。这在单词列表、标签、导航栏里很实用，但做标题排版时容易误用。
实操建议：
- 适用于英文词组、分类标签、按钮文字等需统一首字母大写的场景
- 对带连字符的词（如
"multi-word"）也会把"multi"和"word"都首字母大写，变成"Multi-Word" - 对缩写（如
"usa"）会变成"Usa"，不是你想要的"USA"，这时得手动加<span>或改用 JS 处理 - 注意它不改变 DOM 文本内容，只影响渲染——复制粘贴出来仍是小写
JavaScript 的 toLocaleUpperCase() 更可控，但要注意语言环境
如果需要精确控制“仅第一个字母大写”，就得用 JS。别直接用 str.charAt(0).toUpperCase() + str.slice(1)，因为某些语言（比如土耳其语）的大小写映射规则特殊，toUpperCase() 可能出错。
正确做法是用 toLocaleUpperCase('en-US') 显式指定 locale：
立即学习“前端免费学习笔记（深入）”；
function capitalizeFirst(str) {
if (!str) return str;
return str.charAt(0).toLocaleUpperCase('en-US') + str.slice(1).toLowerCase();
}
常见错误：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 漏掉
toLowerCase()后半部分，导致原字符串中已有的大写字母保留（如"iPhone"→"IPhone"） - 没处理空字符串或
null，直接调用charAt(0)会返回undefined - 在 Vue/React 中频繁调用该函数但没 memoize，影响渲染性能
CSS :first-letter 伪元素不能用于单词首字母
:first-letter 只匹配块级元素的第一个**字符**，不是第一个单词的首字母。所以 <p>apple banana</p> 里，它只会作用于 "a"，不会管 "banana" 的 "b"。
这意味着：
- 它适合段落开头、文章首字下沉，不适合单词级排版
- 对
<span>hello world</span>这种内联元素默认无效，必须设display: block才能触发 - 无法和
text-transform: capitalize叠加实现“首单词大写 + 其余小写”，因为两者作用机制不同
实际项目中推荐组合方案：CSS + 少量 JS
纯 CSS 无法满足“仅首单词首字母大写 + 其余全小写”的需求，但硬编码又难维护。稳妥做法是：用 text-transform: lowercase 统一转小写，再用 JS 标记首字母。
示例（给 class="word" 的元素自动处理）：
document.querySelectorAll('.word').forEach(el => {
const text = el.textContent;
if (text.length > 0) {
el.innerHTML = text.charAt(0).toLocaleUpperCase('en-US') + text.slice(1).toLowerCase();
}
});
关键提醒：
- 避免在
DOMContentLoaded之后才执行，否则用户可能看到闪动（先小写再变大写） - 如果内容来自 CMS 或 API，最好在数据层就处理好格式，而不是靠前端补救
- 移动端 Safari 对
toLocaleUpperCase的旧版本兼容性略差，必要时可降级为toUpperCase()并加 try/catch
真正麻烦的不是怎么写，而是得想清楚：这个首字母大写是展示需求，还是语义需求？如果是后者（比如人名、专有名词），那 CSS 就不该介入，得靠数据源保证正确性。
