CSS文字转换大写

这是我的HTML：

<a href="#" class="link">small caps</a> & 
<a href="#" class="link">ALL CAPS</a>

这是我的CSS：

.link {text-transform: capitalize;}

输出为：

Small Caps & ALL CAPS

我希望输出为：

Small Caps & All Caps

有任何想法吗？

CSS无法做到这一点，您可以为此使用PHP或Javascript。

PHP示例：

$text = "ALL CAPS";
$text = ucwords(strtolower($text)); // All Caps

jQuery示例（现在是插件！）：

// Uppercase every first letter of a word
jQuery.fn.ucwords = function() {
  return this.each(function(){
    var val = $(this).text(), newVal = '';
    val = val.split(' ');

    for(var c=0; c < val.length; c++) {
      newVal += val[c].substring(0,1).toUpperCase() + val[c].substring(1,val[c].length) + (c+1==val.length ? '' : ' ');
    }
    $(this).text(newVal);
  });
}

$('a.link').ucwords();​

您几乎可以做到：

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

它将为您提供输出：

Small caps
All caps

使用.toLowerCase()和进行JavaScript转换，capitalize其余的将完成。

有趣的问题！

capitalize将单词的每个首字母转换为大写，但不将其他字母转换为小写。甚至:first-letter伪类都不会删减它（因为它适用于每个元素的首字母，而不是每个单词），而且我看不到将小写字母和大写字母组合起来以获得所需结果的方法。

据我所知，使用CSS确实是不可能的。

@Harmen在他的答案中显示了漂亮的PHP和jQuery解决方法。

我想提出一个纯CSS解决方案，该解决方案比提出的第一个字母解决方案更有用，但也非常相似。

.link {
  text-transform: lowercase;
display: inline-block;
}

.link::first-line {
  text-transform: capitalize;
}

<div class="link">HELLO WORLD!</div>
<p class="link">HELLO WORLD!</p>
<a href="#" class="link">HELLO WORLD!  ( now working! )</a>

尽管这仅限于第一行，但它可能比第一个字母解决方案用于更多的用例，因为它将大写字母应用于整个行，而不仅是第一个单词。（第一行中的所有单词）在OP的特定情况下，可以解决该问题。

注意：如第一封信解决方案注释中所述，CSS规则的顺序很重要！另外请注意，我改变了<a>一个标记<div>标签，因为某些原因，伪元素::first-line不起作用与<a>标签本身，但无论是<div>或<p>有细。 编辑：该<a>元素将工作，如果display: inline-block;添加到.link类。感谢Dave Land发现这一点！

新注释：如果文本自动换行，则会大写，因为实际上它位于第二行（第一行仍然可以）。

JavaScript：

var links = document.getElementsByClassName("link");
for (var i = 0; i < links.length; i++) {
  links[i].innerHTML = links[i].innerHTML.toLowerCase();
}

CSS：

.link { text-transform: capitalize; }

可汗“结束所做的事情”（这是更干净的方法，对我有用）在标记为答案的帖子评论中被忽略。

captialize只影响单词的第一个字母。http://www.w3.org/TR/CSS21/text.html#propdef-text-transform

对于Java和jstl可能有用。

1. 用本地化消息初始化变量。
2. 之后，可以在jstl toLowerCase函数中使用它。
3. 用CSS转换。

在JSP中

1。

<fmt:message key="some.key" var="item"/>

2。

<div class="content">
  <a href="#">${fn:toLowerCase(item)}</a>
</div>

在CSS中

3。

.content {
  text-transform:capitalize;
}

您可以使用CSS首个字母来完成！例如我想要它作为菜单：

a {display:inline-block; text-transorm:uppercase;}
a::first-letter {font-size:50px;}

它仅与块元素一起运行-因此是内联块！

如果数据来自数据库（如本例所示），则可以先将其降低，然后再将其发送到选择列表/下拉列表。可惜您无法在CSS中做到这一点。

经过大量研究后，我发现jquery函数/表达式仅以大写字母更改了第一个字母的文本，我相应地修改了该代码以使其可用于输入字段。当您在输入字段中写一些东西然后移到另一个文件或元素时，该字段的文本将仅以第一字母大写字母更改。无论用户键入文本时使用大写还是小写：

请遵循以下代码：

步骤1：在html头中调用jquery库：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

步骤2：编写代码以更改输入字段的文本：

<script>
$(document).ready(function(){
$("#edit-submitted-first-name,#edit-submitted-last-name,#edit-submitted-company-name, #edit-submitted-city").focusout(function(){
var str=$(this).val();
str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
    return letter.toUpperCase();
});
$(this).val(str);
 });});

 </script>

步骤3：使用与您在jquery代码中使用的ID相同的ID创建HTML输入字段，例如：

<input type="text" id="edit-submitted-first-name" name="field name">

该输入字段的ID为：edit-submitted-first-name（在步骤2的jquery代码中使用）

**结果：在将焦点从该输入字段的另一个元素移开之后，请确保文本会更改。因为我们在这里使用jquery的focus out事件。结果应如下所示：用户类型：“谢谢”，它将更改为“谢谢”。**

祝你好运

后端的PHP解决方案：

$string = `UPPERCASE`
$lowercase = strtolower($string);
echo ucwords($lowercase);

我知道这是一个较晚的响应，但是如果您想比较各种解决方案的性能，则可以使用我创建的jsPerf。

正则表达式解决方案无疑是最快的。

这是jsPerf：https ://jsperf.com/capitalize-jwaz

有2种正则表达式解决方案。

第一个使用/\b[a-z]/g。单词边界将大写单词，例如不公开改为不公开。

如果仅要将大写的字母大写，请使用第二个正则表达式

/(^[a-z]|\s[a-z])/g

如果您使用的是jQuery；这是一种实现方法：

$('.link').each(function() {
    $(this).css('text-transform','capitalize').text($(this).text().toLowerCase());
});

这是做相同事情的更容易阅读的版本：

//Iterate all the elements in jQuery object
$('.link').each(function() {

    //get text from element and make it lower-case
    var string = $(this).text().toLowerCase();

    //set element text to the new string that is lower-case
    $(this).text(string);

    //set the css to capitalize
    $(this).css('text-transform','capitalize');
});

演示版

它确实存在所有错误-> font-variant：small-caps;

text-transform：capitalize; 只是首字母大写