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
有趣的问题！
capitalize将单词的每个首字母转换为大写，但不会将其他字母转换为小写。 即使是:first-letter伪类也不会将其切割（因为它适用于每个元素的第一个字母，而不是每个单词），而且我也看不到一种将小写字母和大写字母组合的方式来获得所需的结果。
所以就我所知，这对于CSS来说确实是不可能的。
@Harmen在他的回答中显示了好看的PHP和jQuery解决方法。
使用.toLowerCase()和JavaScript进行转换将完成剩下的工作。
captialize只影响单词的第一个字母。 http://www.w3.org/TR/CSS21/text.html#propdef-text-transform
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; }
可汗“最终做了什么”（这是更清洁，为我工作）在标记为答复的post的意见。
可能对java和jstl有用。
- 用本地化消息初始化variables。
- 之后，可以在jstl中使用它来实现LowCasefunction。
- 用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; }
如果数据来自数据库，就像我的情况一样，可以在将数据发送到select列表/下拉列表之前将其降低。 惭愧，你不能在CSS中做到这一点。
你可以用css的第一个字母做！ 例如我想要它的菜单：
a {display:inline-block; text-transorm:uppercase;} a::first-letter {font-size:50px;}
它只与块元素一起运行 – 因此是内联块！
经过大量的研究，我发现jquery函数/expression式只能以大写字母的首字母来改变文本，所以我相应地修改了这个代码，使得它可以用于input字段。 当您在input字段中写入某些内容，然后移至另一个字段或元素时，该字段的文本将仅以第一个字母的大写字母进行更改。 无论用户input的文本是全部大写还是小写：
遵循以下代码：
步骤1：在html头部调用jquery库：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
第二步：编写代码来改变input字段的文本：
<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[az]/g, function(letter) { return letter.toUpperCase(); }); $(this).val(str); });}); </script>
第3步：用jQuery代码中使用相同的id创buildHTMLinput字段，如：
<input type="text" id="edit-submitted-first-name" name="field name">
这个input字段的id是：edit-submitted-first-name（在步骤2中使用jQuery代码）
**结果：确保文本将在您将焦点从另一个元素的input字段中移开后进行更改。 因为我们在这里使用焦点事件的jquery。 结果应该是这样的：用户types：“谢谢”它会改变“谢谢你”。 **
祝你好运
link {text-transform：小写！重要;}
链接：首字母{text-transform：大写;}
大写将单词的每个首字母转换为大写，但不会将其他字母转换为小写。 所以，使用文字转换：首字母大写，文字转换：其余的小写。 为我工作。
由于缺乏声誉，我无法对哈门发表评论，所以再次写下哈门的相同答案。 我已经将LowerCase（）添加到答案，所以它可以将“ALL CAPS”转换为“All Caps”。
$.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).toLowerCase() + (c+1==val.length ? '' : ' '); } $(this).text(newVal); }); $('a.link').ucwords();
所有错误它确实存在 – > font-variant：small-caps;
文本转换：大写; 只是第一个字母上限
