php - 如何使用 CSS 将大写文本转换为标题大小写

Question

如果您正在阅读本文，您可能会注意到 CSS 属性 text-transform:capitalize; 不会将 THIS 转换为 This。相反，非初始字符保持大写，因此转换在这种情况下无效。那么我们如何才能达到这个结果呢？

我看到这个问题经常被问到，大多数答案都很快促进使用 javascript 来完成这个。这会起作用，但如果您正在为 Wordpress、Drupal 或 Joomla 等 PHP CMS 编写或自定义模板/主题，则没有必要。

Answer 1

在某种程度上，您可以通过使用伪类::first-letter 的 CSS 来实现这一点，并且应该一直工作到 IE 5.5 :-(

注意:这非常依赖于您的 html 结构，并非在所有情况下都有效，但有时会有用。点击“运行代码片段”以查看下面的结果。

.progTitle {
    text-transform: lowercase;
}

.progTitle::first-letter {
    text-transform: uppercase;
}

<p class="progTitle">THIS IS SOME TEST TEXT IN UPPERCASE THAT WILL WORK. </p>
<p class="progTitle">this is some test text in lowercase that will work. </p>
<p class="progTitle"><i class="fa fa-bars"></i> THIS WILL NOT WORK </p>