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

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;不会将此转换为此。相反,非初始字符保持大写,因此转换在这种情况下无效。那么我们如何才能实现这一结果呢?

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进行推广来完成此任务。这将有效,但如果您正在为Word CMS,Drupal或Joomla等PHP CMS编写或自定义模板/主题,则无需这样做。

5 个解决方案

#1

The bad news is that there is no such thing as text-transform : title-case which 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.

坏消息是没有文本转换这样的东西: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.

希望这有助于某人。快乐的编码。

#2

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

在某种程度上你可以用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>

#3

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网站中的一个工作示例。目的是获取一个最初为大写的字符串,并将其转换为Proper Case。

UPPERCASE:

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

Proper Case:

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

#4

-3

This can be achieved with one simple rule:

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

text-transform: capitalize;

#5

-5

You just write text-transform: none;

你只需要写text-transform:none;

#1