Question

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

我经常看到这个问题，大多数答案很快就会使用javascript进行推广来完成此任务。这将有效，但如果您正在为Word CMS，Drupal或Joomla等PHP CMS编写或自定义模板/主题，则无需这样做。

Answer 1

在某种程度上，您可以使用CSS使用伪类::第一个字母来实现这一点，并且应该一直回到IE 5.5 :-(

注意：这非常依赖于您的html结构，并不会在所有情况下都有效，但可能会不时有用。点击＆＃34;运行代码段＆＃34;看到下面的结果。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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;

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

5 个答案: