如何使用CSS实现每个单词首字母大写？尝试Stack Overflow方案无效，无需JS解法

问题原因 #

你现有代码仅能实现第一个单词首字母大写，是因为::first-letter伪元素只会匹配整个元素的第一个字符，无法识别文本内部的单词边界，自然没办法给后续单词的首字母应用大写规则。

解决方法 #

直接使用CSS原生的text-transform: capitalize属性即可，该属性会自动识别空格分隔的单词边界，给每个单词的首字母应用大写转换。如果你需要同时统一所有非首字母为小写，可直接参考下方完整代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
    <style>
       h1 {
          /* 先将全部字符转为小写 */
          text-transform: lowercase;
          /* 再将每个单词的首字母转为大写 */
          text-transform: capitalize;
       }
   </style>
</head>
<body>
    <h1>THIS IS TEST</h1>
</body>
</html>

运行后输出结果为This Is Test，可满足需求。

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