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

Posted 2023-02-24

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

【英文标题】：How to convert UPPERCASE text to Title Case using CSS

【发布时间】：2012-11-27 10:28:24

【问题描述】：

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

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

【参考方案1】：

坏消息是没有 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> 
?>

希望这对某人有所帮助。编码愉快。

【讨论】：

ucwords 本身是不够的，您还必须先将字符串转为小写。 ucwords(strtolower('ORIGINAL TEXT'));

【参考方案2】：

你就写text-transform: none;

【讨论】：

如果您的输入文本是大写的，那将不起作用。

另外，标题大小写并不意味着没有转换。标题大小写表示每个单词的第一个字母大写，其余小写。 OP 正在寻找capitalize。

@EduardLuca 这也不是标题的意思：grammar-monster.com/lessons/capital_letters_title_case.htm（我同意这个答案不起作用）

@Gus 是的，在 CSS 中没有办法做到这一点，所以我说的是最接近可能的。

【参考方案3】：

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

text-transform: capitalize;

【讨论】：

请展示您的用例场景。我发现这很容易工作。

@EmmanuelBuckshi 在您建议的方法中，第二条规则将覆盖第一条规则，而不是像您暗示的那样相互建立。你说它适合你——你能介绍一下你的工作用例吗？

你是对的 -> 第一条规则是不必要的。然而，总的来说，第二条规则（本身）应该导致 OP 想要的结果（它“有效”）。

无论如何，我的答案是唯一一个不使用php就能真正解决问题的答案。接受的答案是错误的，因为它声明“标题大小写”没有 css 规则；绝对有，我的回答清楚地表明了这一点。

这只会将每个单词的第一个字母转换为大写，如果它的小写，它不会将大写转换为后续字母的小写。因此，其他答案中的要求首先转换为小写

【参考方案4】：

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

注意：这非常依赖于您的 html 结构，并非在所有情况下都有效，但有时会很有用。点击“run code sn -p”可以看到下面的结果。

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

【讨论】：

这可能会让你对文本的第一句进行正确的大写，但不能实现“标题大小写”，即“这是一些可以使用的大写测试文本”（无论是否大写“一些”是品味/判断的问题）

嗨@Gus 你是对的，这个答案会给你句子大小写而不是标题大小写。原始问题中没有提及首选哪个，因此我在原始答案中添加了警告。这可能比 JS 解决方案更少依赖资源，但并不适合所有用例。

【参考方案5】：

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

大写：

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

正确的案例：

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

【讨论】：

不是 CSS 解决方案...这个问题是关于 CSS 的。