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

Question

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

我经常看到这个问题，大多数答案都可以快速推广使用 javascript 来实现这一点。这将起作用，但如果您正在为 Wordpress、Drupal 或 Joomla 等 PHP CMS 编写或自定义模板/主题，则没有必要。

Answer 1

在某种程度上，您可以通过 CSS 使用伪类 ::first-letter 来实现这一点，并且应该可以一直追溯到 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>

Answer 2

坏消息是没有这样的东西text-transform : title-case可以保证结果是标题大小写。好消息是有一种方法可以做到这一点，它不需要 javascript（通常建议用于这种情况）。如果您正在为 CMS 编写主题，您可以使用 strtolower()ucwords()并将相关文本转换为标题大小写。

之前（这不起作用）：

<style>
.title-case{ text-transform:capitalize; }
</style>
<span class="title-case">ORIGINAL TEXT</span>

后：

<?php echo ucwords( strtolower('ORIGINAL TEXT') ); ?>

如果您正在编写主题，您可能会使用变量而不是文本字符串，但函数和概念的工作方式相同。这是一个使用原生 Wordpress 函数get_the_title()将页面标题作为变量返回的示例：

<?php
$title = get_the_title();
$title = strtolower($title);
$title = ucwords($title); 
<h1>
<?php echo $title;
</h1> 
?>

希望这可以帮助某人。快乐编码。

Answer 3

这是运行 Virtuemart 1 的 Joomla 1.5.22 网站中的一个工作示例。目的是获取一个最初为大写的字符串，并将其转换为正确的大小写。

大写：

<?php echo $list[$i]->name; ?>

适当的情况：

<?php echo ucwords( strtolower($list[$i]->name) ); ?>

Answer 4

这可以通过一个简单的规则来实现：

text-transform: capitalize;

Answer 5

你只写text-transform: none;