php 如何使用 CSS 将大写文本转换为标题大小写
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13793666/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to convert UPPERCASE text to Title Case using CSS
提问by emersonthis
If you're reading this you probably noticed that the CSS property text-transform:capitalize;does not convert THIS into This. Instead the, non-initial characters remain capitalized, so the transformation has no effect in this case. So how can we achieve this result?
如果您正在阅读本文，您可能会注意到 CSS 属性text-transform:capitalize;不会将 THIS 转换为 This。相反，非初始字符保持大写，因此在这种情况下转换无效。那么我们怎样才能达到这个结果呢？
I've seen this asked often and most answers are quick to promote using javascript to accomplish this. This will work, but it is unnecessary if you are writing or customizing a template/theme for a PHP CMS like Wordpress, Drupal, or Joomla.
我经常看到有人问这个问题，大多数答案都可以快速推广使用 javascript 来实现这一点。这会起作用，但如果您正在为 PHP CMS（如 Wordpress、Drupal 或 Joomla）编写或自定义模板/主题，则没有必要。
采纳答案by emersonthis
The bad news is that there is no such thing as text-transform : title-casewhich would guarantee the result to be title cased. The good news is that there IS a way to do it, which doesn't require javascript (as is often suggested for this situation). If you are writing a theme for a CMS you can use strtolower() and ucwords()to convert the relevant text to title case.
坏消息是没有这样的事情text-transform : title-case可以保证结果是标题。好消息是有一种方法可以做到这一点，它不需要 javascript（在这种情况下通常建议这样做）。如果您正在为 CMS 编写主题，您可以使用 strtolower()ucwords()并将相关文本转换为标题大小写。
BEFORE (THIS DOESN'T WORK):
之前（这不起作用）：
<style>
.title-case{ text-transform:capitalize; }
</style>
<span class="title-case">ORIGINAL TEXT</span>
AFTER:
后：
<?php echo ucwords( strtolower('ORIGINAL TEXT') ); ?>
If you are writing a theme, you'll probably be working with variables instead of text strings, but the function and the concept work the same way. Here's an example using the native Wordpress function get_the_title()to return the page title as a variable:
如果您正在编写主题，您可能会使用变量而不是文本字符串，但函数和概念的工作方式相同。这是一个使用原生 Wordpress 函数get_the_title()将页面标题作为变量返回的示例：
<?php
$title = get_the_title();
$title = strtolower($title);
$title = ucwords($title);
<h1>
<?php echo $title;
</h1>
?>
Hope this helps someone. Happy coding.
希望这可以帮助某人。快乐编码。
回答by BMac
To some degree you can achieve this with CSS using the pseudo class ::first-letter and should work all the way back to IE 5.5 :-(
在某种程度上，您可以使用伪类 ::first-letter 通过 CSS 实现这一点，并且应该一直工作到 IE 5.5 :-(
NOTE: this is very dependent on your html structure, and will not work in all cases, but can be useful from time to time. Hit "run code snippet" to the see the result below.
注意：这非常依赖于您的 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>回答by R Diaz
Here is a working example in a Joomla 1.5.22 website running Virtuemart 1. The purpose is to take a string which is originally UPPERCASE, and convert it to Proper Case.
这是运行 Virtuemart 1 的 Joomla 1.5.22 网站中的一个工作示例。目的是获取一个最初为大写的字符串，并将其转换为正确的大小写。
UPPERCASE:
大写：
<?php echo $list[$i]->name; ?>
Proper Case:
正确案例：
<?php echo ucwords( strtolower($list[$i]->name) ); ?>
回答by Emmanuel Buckshi
This can be achieved with one simple rule:
这可以通过一个简单的规则来实现：
text-transform: capitalize;
回答by Nate Beers
You just write text-transform: none;
你只要写 text-transform: none;
