使用文本转换强制大写输入到 CSS 中的标题大小写
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1033664/
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
Force capitalised input to title case in CSS using text-transform
提问by alexmuller
I'm creating a theme for a CMS, and only have the ability to change the CSS associated with the page (no Javascript, PHP, etc).
我正在为 CMS 创建一个主题，并且只能更改与页面关联的 CSS（没有 Javascript、PHP 等）。
Is there a way to change this list of users that we have:
有没有办法更改我们拥有的用户列表：
JOHN SMITH
DAVID JONES
...
约翰·史密斯
大卫·琼斯
...
into proper title case (John Smith, etc) using CSS?
使用 CSS 转换为正确的标题大小写（John Smith 等）？
text-transform: lowercase;works ok (john smith, etc) but text-transform: capitalize;does nothing (remains capitalised).
text-transform: lowercase;工作正常（约翰史密斯等）但text-transform: capitalize;什么都不做（保持大写）。
As requested, the HTML is:
根据要求，HTML 是：
<tr> [...] <td class="cell c1">ALEXANDER MULLER</td> [...] </tr>
<tr> [...] <td class="cell c1">JOHN SMITH</td> [...] </tr>
And the CSS is:
CSS是：
td {
text-transform: capitalize;
}
回答by jimyi
text-transform: capitalize;only modifies the first letter of each word, so if the first letter of a word is already capitalized, text-transform skips that word.
text-transform: capitalize;只修改每个单词的第一个字母，所以如果一个单词的第一个字母已经大写，text-transform 会跳过那个单词。
Example:
例子：
JoHN smithwill become JoHN Smith
JoHN smith会变成 JoHN Smith
There is no way to do title-casing using only CSS unless all of your words are all lowercase.
除非所有单词都是小写，否则无法仅使用 CSS 进行标题大小写。
回答by Praveen Vijayan
We can use a trick to do it. But watch for browser compatibility. https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter
我们可以使用一个技巧来做到这一点。但要注意浏览器兼容性。 https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter
p{
text-transform: lowercase;
}
p:first-letter{
text-transform: uppercase;
}
Eg:
例如：
这是一些文字。 这是一些文字。这是一些文本。Output -> This is some text
输出 -> 这是一些文本
回答by artlung
What your're experiencing is how it works. This is from the spec:
你所经历的是它是如何工作的。这是来自规范：
"capitalizePuts the first character of each word in uppercase; other characters are unaffected."
" capitalize将每个单词的第一个字符大写；其他字符不受影响。"
Now, you can do (I'm assuming you have a list with list item <li>tags:
现在，您可以这样做（我假设您有一个带有列表项<li>标签的列表：
li:first-letter {
text-transform: uppercase;
}
Along with your lowercase of the li, but in combination that will only affect the first words of each line, so you get:
随着 li 的小写，但组合起来只会影响每行的第一个单词，所以你得到：
John smith
David jones
I don't believe there's a pure CSS solution for you here. This is tricky because of names like John McCain, Oscar de la Hoya, John Smith PhD, Jane Smith MD, and people who prefer lowercase like danah boyd or e.e. cummings. There's always exceptions when you try to use Title Case. These exceptions will cause you headaches. If you don't have control over the content, the content will give you headaches.
我不相信这里有适合您的纯 CSS 解决方案。这很棘手，因为像 John McCain、Oscar de la Hoya、John Smith PhD、Jane Smith MD 这样的名字，以及喜欢小写字母的人，比如 danah boyd 或 ee cummings。当您尝试使用 Title Case 时，总会有例外。这些异常会让你头疼。如果您无法控制内容，那么内容会让您头疼。
回答by Andrew Rollings
In your situation, the only way I've ever got this working is with the use of javascript. As the other answers state, the capitalize transform doesn't do the trick.
在你的情况下，我让这个工作的唯一方法是使用 javascript。正如其他答案所述，大写转换不起作用。
I think that if this is a requirement then you'll have to figure out a way to sanitize the names upstream. Either capitalize them correctly, or convert them to lower case so that the CSS transform will work as expected.
我认为，如果这是一项要求，那么您必须想出一种方法来清理上游的名称。要么正确地将它们大写，要么将它们转换为小写，以便 CSS 转换按预期工作。
Andrew
安德鲁
回答by Jim Merrikin
I have faced this issue numerous times when the text comes in all uppercase from a CMS or database. What I do is use jQuery .each function to iterate through the selected elements, apply a javascript toLowerCase method to each, then use CSS to set text-transform: capitalize.
当文本从 CMS 或数据库全部为大写时，我多次遇到过这个问题。我所做的是使用 jQuery .each 函数遍历所选元素，将 javascript toLowerCase 方法应用于每个元素，然后使用 CSS 设置 text-transform: capitalize。
Works every time!
每次都有效！
回答by Ashok M A
I know the question was about only the CSS way. Since most of the views are with models nowadays, this might help somebody.
我知道问题仅与 CSS 方式有关。由于现在大多数视图都带有模型，因此这可能会对某些人有所帮助。
<div style="text-transform: capitalize;">
{{ person.firstName.toLowerCase() }}
</div>
回答by kemiller2002
This shows that text-transform: capitalizeis working for me in IE, Chrome and FF for Windows:
这表明text-transform: capitalize在 IE、Chrome 和 FF for Windows 中对我有用：
http://www.tizag.com/cssT/text.php
http://www.tizag.com/cssT/text.php
What are you using to try it out in?
你用什么来试一试？
