CSS 文本转换大写字母

只影响单词的第一个字母

有趣的问题！

capitalize将单词的每个首字母转换为大写，但是 没有将其他字母转换为小写。即使是 :first-letter伪类也不会削减它(因为它适用于每个元素的第一个字母，而不是每个单词) ，而且我看不到一种将小写字母和大写字母结合起来以获得期望结果的方法。

因此，就我所见，这确实不可能用 CSS 来完成。

@ Harmen 在他的回答中展示了漂亮的 PHP 和 jQuery 变通方法。

没有办法做到这一点与 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();​

如果数据来自数据库，比如在我的示例中，可以在将数据发送到选择列表/下拉列表之前将其降低。可惜不能用 CSS 做。

你可以用:

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

它会给你输出:

Small Caps
All Caps

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

可汗“最终做了什么”(这对我来说更干净，也更有效)在标记为答案的帖子的评论下面。

可能对 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;
}

所有错误都存在—— > 字体变体: 小写字母;

文本转换: 大写; 只是第一个字母上限

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

你可以做它与 CSS 的第一个字母！ 我想把它列入菜单:

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

它只与块元素一起运行——因此是 inline-block！

经过大量的研究，我发现 jquery 函数/表达式只改变首字母大写的文本，我相应地修改代码，使其可用于输入字段。当您将在输入字段中写入某些内容，然后移动到另一个文件或元素时，该字段的文本将仅以第一个字母大写进行更改。无论用户类型文本是完全大写还是小写:

遵循以下代码:

步骤1: 在 html head 中调用 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 创建 HTML 输入字段，比如:

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

这个输入字段的 id 是: edit-submit-first-name (它在步骤2的 jquery 代码中使用)

* * 结果: 在将焦点从该输入字段移到另一个元素后，请确保文本将发生更改。因为我们在这里使用了 jquery 的 focus out 事件。 结果应该是这样的: 用户类型: “谢谢”它将与“谢谢”改变。 **

祝你好运

我知道这是一个很晚的响应，但是如果您想要比较各种解决方案的性能，我有一个我创建的 jsPerf。

正则表达式解决方案肯定是最快的。

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

有两个正则表达式解决方案。

第一种使用 /\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');
});

演示

我想推荐一个 纯 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 规则的顺序很重要！还要注意，我为 <div>标记更改了 <a>标记，因为由于某种原因，伪元素 ::first-line不能与 <a>标记 天生的一起工作，但是 <div>或 <p>都可以。 编辑: 如果 display: inline-block;被添加到 .link类，那么就是 <a>元素 会成功的。感谢 Dave Land发现了这一点！