text-transform:capitalize对全大写文本不生效的技术咨询

CSS的text-transform: capitalize规则只会将每个单词的首字母转为大写，其余字母保持原文本的大小写状态。所以当原文本是全大写时，应用这个规则后，非首字母依然是大写，视觉上和原文本没有区别，导致看起来没生效。

解决方案1：纯CSS实现（推荐） #

先将所有文本转为小写，再应用首字母大写规则，用复合属性实现：

div.c {
  text-transform: lowercase capitalize;
}

这样处理后，原全大写文本会被先转为全小写，再把每个单词首字母大写，最终得到「This Is Testing Content」的效果。

解决方案2：JavaScript实现（灵活处理特殊场景） #

如果需要更精细的文本控制（比如处理带连字符的单词、缩写等），可以用JS手动处理文本内容：

// 获取目标元素
const targetDiv = document.querySelector('div.c');
// 处理文本：拆分单词，每个单词首字母大写、其余小写后重新拼接
targetDiv.textContent = targetDiv.textContent.split(' ')
  .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
  .join(' ');

内容的提问来源于stack exchange，提问作者Anu