如何在纯HTML中实现文本大写？非段落标签的替代方法

嘿，这个需求很常见！不想用<p>标签的话，有好几种更灵活的方式来实现文本大写，主要靠CSS的text-transform属性配合合适的元素，下面给你详细说：

• 用行内元素+CSS类：
  如果你需要重复使用这个样式，推荐定义一个CSS类，然后用<span>（无语义的行内容器）来包裹文本，这样不会引入多余的块级语义：

  <span class="uppercase-text">This is some text.</span>
  
  <style>
    .uppercase-text {
      text-transform: uppercase;
    }
  </style>
  

  <span>是最适合的选择，因为它本身没有任何默认样式和语义，只是用来包裹文本应用样式。

• 内联样式直接写：
  如果只是单个元素需要大写，不想额外写CSS类，可以直接把样式写在元素的style属性里：

  <span style="text-transform: uppercase;">This is some text.</span>
  

  这种方式快捷，但不适合重复使用的场景，后期维护起来麻烦。

• 给父容器统一设置：
  要是某个区域内的所有文本都需要大写，不用逐个包裹元素，直接给父容器加样式就行：

  <div style="text-transform: uppercase;">
    这里的所有文本都会变成大写，不管是普通文本还是<a href="#">链接文本</a>
  </div>
  

  这种方法能批量生效，非常省心。

额外提一句：text-transform: uppercase是视觉上把文本转为大写，实际DOM里的字符还是原来的小写/混合大小写。如果你的需求是实际字符变为大写（比如某些特殊场景），那可以用JavaScript来处理，但绝大多数场景下，CSS的方法已经完全够用啦。

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