如何通过CSS text-transform:capitalize让指定单词不首字母大写？

这个问题确实挺头疼的——用CSS的text-transform: capitalize统一处理标题时，那些像a、the、is这类功能词总会被强制大写，完全不符合标题大小写的规范。下面给你几个实用的解决思路：

方案一：手动标记+CSS重置（适合静态内容） #

如果你的标题是固定写死的，最直接的方式就是用<span>把不需要大写的词包裹起来，然后单独重置它的文本转换样式：

HTML代码 #

<h1>This <span class="keep-lower">is</span> the <span class="keep-lower">First</span> Article on My Blog</h1>

CSS代码 #

h1, h2 {
  text-transform: capitalize;
}
.keep-lower {
  text-transform: lowercase;
}

这种方法简单直观，完全不需要额外的脚本，而且能精准控制每个单词的样式。如果担心原单词是大写输入的，这个样式也能把它转成小写，完美贴合需求。

方案二：JavaScript自动处理（适合动态内容） #

如果你的标题是从数据库、API动态拉取的，或者不想手动一个个加标签，那写个小脚本自动处理会更省心。这个脚本可以识别指定的小词，把它们转成小写，同时还能遵守标题大小写的规范（比如开头和结尾的小词依然保持大写）：

JavaScript代码 #

function normalizeTitleCase(elements) {
  // 定义需要保留小写的功能词，可以根据需求扩展
  const lowercaseWords = ['a', 'an', 'the', 'is', 'of', 'and', 'but', 'or', 'for', 'nor', 'on', 'at', 'to', 'from', 'by'];
  
  elements.forEach(element => {
    const words = element.textContent.trim().split(/\s+/);
    const normalizedWords = words.map((word, index) => {
      const lowerWord = word.toLowerCase();
      
      // 标题首尾的单词强制大写，不管是不是功能词
      if (index === 0 || index === words.length - 1) {
        return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
      }
      
      // 匹配到功能词则转小写，否则首字母大写
      return lowercaseWords.includes(lowerWord) 
        ? lowerWord 
        : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
    });
    
    element.textContent = normalizedWords.join(' ');
  });
}

// 给所有h1、h2标题应用这个处理
normalizeTitleCase(document.querySelectorAll('h1, h2'));

这个脚本会自动遍历所有指定的标题元素，处理文本内容。你还可以根据自己遵循的标题规范（比如AP风格、芝加哥风格），调整lowercaseWords数组或者脚本的判断逻辑，让结果更符合需求。

内容的提问来源于stack exchange，提问作者Viktor Vörös