blocks|key|1172182|text|CSS无法做到这一点，你可以使用PHP或Javascript来实现这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1172183|PHP示例：|1172184|$text+=+"ALL+CAPS";
$text+=+ucwords(strtolower($text));+//+All+Caps|code-block|syntax|javascript|1172185|jQuery示例(现在它是一个插件！)：|1172186|//+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%2B%2B)+{
++++++newVal+%2B=+val[c].substring(0,1).toUpperCase()+%2B+val[c].substring(1,val[c].length)+%2B+(c%2B1==val.length+?+''+:+'+');
++++}
++++$(this).text(newVal);
++});
}

$('a.link').ucwords();​|1172187|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

There is no way to do this with CSS, you could use PHP or Javascript for this.

PHP example: 

<pre><code>$text = "ALL CAPS";
$text = ucwords(strtolower($text)); // All Caps
</code></pre>

jQuery example (it's a plugin now!):

<pre><code>// 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 &lt; 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();​
</code></pre>

blocks|key|1172300|text|使用.toLowerCase()和capitalize进行JavaScript转换可以完成剩下的工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1172301|entityMap^0|2|E|H|A|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

Convert with JavaScript using <code>.toLowerCase()</code> and <code>capitalize</code> would do the rest.

blocks|key|957726|text|captialize只影响单词的第一个字母。http://www.w3.org/TR/CSS21/text.html#propdef-text-transform|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|957727|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/CSS21/text.html#propdef-text-transform^0|0|A|M|1N|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

<code>captialize</code> only effects the first letter of the word. <a href="http://www.w3.org/TR/CSS21/text.html#propdef-text-transform" rel="nofollow noreferrer">http://www.w3.org/TR/CSS21/text.html#propdef-text-transform</a>

blocks|key|1172353|text|你可以用css的第一个字母做到这一点！我想把它放在菜单上：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1172354|a+{display:inline-block;+text-transorm:uppercase;}
a::first-letter+{font-size:50px;}|code-block|syntax|javascript|1172355|它只与块元素一起运行-因此是内联块！|1172356|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can do it with css first-letter!
eg I wanted it for the Menu:

<pre><code>a {display:inline-block; text-transorm:uppercase;}
a::first-letter {font-size:50px;}
</code></pre>

It only runs with block elements - therefore the inline-block!

blocks|key|1172220|text|如果数据来自数据库，如我的例子，您可以在将其发送到选择列表/下拉列表之前降低它。遗憾的是你不能在CSS中做到这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1172221|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

If the data is coming from a database, as in my case, you can lower it before sending it to a select list/drop down list. Shame you can't do it in CSS.

blocks|key|958071|text|PHP解决方案，在后端：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|958072|$string+=+`UPPERCASE`
$lowercase+=+strtolower($string);
echo+ucwords($lowercase);|code-block|syntax|javascript|958073|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The PHP solution, in backend:

<pre><code>$string = `UPPERCASE`
$lowercase = strtolower($string);
echo ucwords($lowercase);
</code></pre>

blocks|key|1172422|text|我知道这是一个较晚的响应，但是如果您想比较各种解决方案的性能，我有一个我创建的jsPerf。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1172423|Regex解决方案无疑是最快的。|1172424|这是jsPerf：https://jsperf.com/capitalize-jwaz|offset|length|1172425|有2种正则表达式解决方案。|1172426|第一个使用/\b[a-z]/g。单词边界将不披露等词大写为不披露。|style|CODE|1172427|如果只想大写前面有空格的字母，那么使用第二个正则表达式|1172428|/(%5E[a-z]%7C\s[a-z])/g|code-block|syntax|javascript|1172429|entityMap|0|LINK|mutability|MUTABLE|url|https://jsperf.com/capitalize-jwaz^0|0|0|9|Y|0|0|0|5|A|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@$F|15|G|16|1|17]]|A|$]]|$1|H|3|I|5|6|7|18|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|19|8|@$F|1A|G|1B|L|M]]|9|@]|A|$]]|$1|N|3|O|5|6|7|1C|8|@]|9|@]|A|$]]|$1|P|3|Q|5|R|7|1D|8|@]|9|@]|A|$S|T]]|$1|U|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

I know this is a late response but if you want to compare the performance of various solutions I have a jsPerf that I created.

Regex solutions are the fastest for sure.

Here is the jsPerf: <a href="https://jsperf.com/capitalize-jwaz" rel="nofollow noreferrer">https://jsperf.com/capitalize-jwaz</a>

There are 2 regex solutions.

The first one uses<code>/\b[a-z]/g</code>. Word boundary will capital words such as non-disclosure to Non-Disclosure.

If you only want to capitalize letters that are preceded by a space then use the second regex 

<pre><code>/(^[a-z]|\s[a-z])/g
</code></pre>

blocks|key|958029|text|如果你使用的是jQuery，这是一个很好的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|958030|$('.link').each(function()+{
++++$(this).css('text-transform','capitalize').text($(this).text().toLowerCase());
});|code-block|syntax|javascript|958031|下面是一个更容易阅读的版本，可以做同样的事情：|958032|//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');
});|958033|Demo|offset|length|958034|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/fooaldrin/2fLoz3nk/3/^0|0|0|0|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

if you are using jQuery; this is one a way to do it:

<pre><code>$('.link').each(function() {
 $(this).css('text-transform','capitalize').text($(this).text().toLowerCase());
});
</code></pre>

Here is an easier to read version doing the same thing:

<pre><code>//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');
});
</code></pre>

<a href="https://jsfiddle.net/fooaldrin/2fLoz3nk/3/" rel="nofollow noreferrer">Demo</a>

blocks|key|957821|text|所有的错误它确实存在-->字体变体:小写；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|957822|text-transform:大写；只需首字母大写|957823|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

all wrong it does exist --> font-variant: small-caps;

text-transform:capitalize; just the first letter cap

Here is my HTML:

<pre><code>&lt;a href="#" class="link"&gt;small caps&lt;/a&gt; &amp; 
&lt;a href="#" class="link"&gt;ALL CAPS&lt;/a&gt;
</code></pre>

Here is my CSS:

<pre><code>.link {text-transform: capitalize;}
</code></pre>

The output is:

<pre><code>Small Caps &amp; ALL CAPS
</code></pre>

and I want the output to be:

<pre><code>Small Caps &amp; All Caps
</code></pre>

Any ideas?

CSS text-transform capitalize on all caps

这是我的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文本-全部大写转换
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS文本-全部大写转换EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS文本-全部大写转换
EN