CSS text-transform 全部大写
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3471157/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS text-transform capitalize on all caps
提问by Khan
Here is my HTML:
这是我的 HTML：
<a href="#" class="link">small caps</a> &
<a href="#" class="link">ALL CAPS</a>
Here is my CSS:
这是我的 CSS：
.link {text-transform: capitalize;}
The output is:
输出是：
Small Caps & ALL CAPS
and I want the output to be:
我希望输出是：
Small Caps & All Caps
Any ideas?
有任何想法吗？
采纳答案by Harmen
There is no way to do this with CSS, you could use PHP or Javascript for this.
没有办法用 CSS 做到这一点，你可以使用 PHP 或 Javascript 来做到这一点。
PHP example:
PHP示例：
$text = "ALL CAPS";
$text = ucwords(strtolower($text)); // All Caps
jQuery example (it's a plugin now!):
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();?
回答by Philihp Busby
You can almostdo it with:
你几乎可以做到：
.link { text-transform: lowercase; }
.link:first-letter { text-transform: uppercase; }
It will give you the output:
它会给你输出：
Small caps
All caps
回答by ronnyfm
Convert with JavaScript using .toLowerCase()and capitalizewould do the rest.
使用 JavaScript 进行转换，.toLowerCase()然后capitalize将完成其余的工作。
回答by Pekka
Interesting question!
有趣的问题！
capitalizetransforms every first letter of a word to uppercase, but it does nottransform the other letters to lowercase. Not even the :first-letterpseudo-class will cut it (because it applies to the first letter of each element, not each word), and I can't see a way of combining lowercase and capitalize to get the desired outcome.
capitalize将单词的每个首字母转换为大写，但不会将其他字母转换为小写。甚至:first-letter伪类也不会削减它（因为它适用于每个元素的第一个字母，而不是每个单词），而且我看不到一种组合小写和大写以获得所需结果的方法。
So as far as I can see, this is indeed impossible to do with CSS.
所以据我所知，这确实是用 CSS 做不到的。
@Harmen shows good-looking PHP and jQuery workarounds in his answer.
@Harmen 在他的回答中展示了好看的 PHP 和 jQuery 解决方法。
回答by JDuarteDJ
I'd like to sugest a pure CSSsolution that is more useful than the first lettersolution presented but is also very similar.
我想推荐一个纯 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>Although this is limited to the first line it may be useful for more use cases than the first lettersolution since it applies capitalization to the whole line and not only the first word. (all words in the first line) In the OP's specific case this could have solved it.
尽管这仅限于第一行，但它可能比首字母解决方案更适用于更多用例，因为它将大写应用于整行，而不仅仅是第一个单词。（第一行中的所有单词）在 OP 的特定情况下，这可以解决它。
Notes:As mentioned in the first lettersolution comments, the order of the CSS rules is important! Also note that I changed the <a>tag for a <div>tag because for some reason the pseudo-element ::first-linedoesn't work with <a>tags nativelybut either <div>or <p>are fine.
EDIT:the <a>element will workif display: inline-block;is added to the .linkclass. Thanks to Dave Landfor spotting that!
注意：正如第一个字母解决方案评论中提到的，CSS 规则的顺序很重要！另外请注意，我改变了<a>一个标记<div>标签，因为某些原因，伪元素::first-line不起作用与<a>标签本身，但无论是<div>或<p>有细。
编辑：如果将<a>元素添加到类中，则该元素将起作用。感谢Dave Land发现这一点！display: inline-block;.link
New Note:if the text wrapsit will loose the capitalization because it is now in fact on the second line (first line is still ok).
新注意：如果文本换行，它会丢失大写，因为它现在实际上位于第二行（第一行仍然可以）。
回答by ryanttb
JavaScript:
JavaScript：
var links = document.getElementsByClassName("link");
for (var i = 0; i < links.length; i++) {
links[i].innerHTML = links[i].innerHTML.toLowerCase();
}
CSS:
CSS：
.link { text-transform: capitalize; }
What Khan "ended up doing" (which is cleaner and worked for me) is down in the comments of the post marked as the answer.
Khan“最终做了什么”（更干净并且对我有用）在标记为答案的帖子的评论中。
回答by prodigitalson
captializeonly effects the first letter of the word. http://www.w3.org/TR/CSS21/text.html#propdef-text-transform
captialize只影响单词的第一个字母。http://www.w3.org/TR/CSS21/text.html#propdef-text-transform
回答by ekar
May be useful for java and jstl.
可能对 java 和 jstl 有用。
- Initialize variable with localized message.
- After that it is possible to use it in jstl toLowerCase function.
- Transform with CSS.
- 使用本地化消息初始化变量。
- 之后就可以在 jstl toLowerCase 函数中使用它。
- 使用 CSS 进行转换。
In JSP
在 JSP 中
1.
1.
<fmt:message key="some.key" var="item"/>
2.
2.
<div class="content">
<a href="#">${fn:toLowerCase(item)}</a>
</div>
In CSS
在 CSS 中
3.
3.
.content {
text-transform:capitalize;
}
回答by Johannes
You can do it with css first-letter! eg I wanted it for the Menu:
你可以用css首字母来做！例如，我想要它用于菜单：
a {display:inline-block; text-transorm:uppercase;}
a::first-letter {font-size:50px;}
It only runs with block elements - therefore the inline-block!
它只与块元素一起运行——因此是内联块！
回答by JohnnyBizzle
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.
如果数据来自数据库，就像我的情况一样，您可以在将其发送到选择列表/下拉列表之前降低它。可惜你不能在 CSS 中做到这一点。
