Html 使用 CSS 将句子中的大写字母转换为小写和第一个大写
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4322314/
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
Convert Uppercase Letter to Lowercase and First Uppercase in Sentence using CSS
提问by Hafizul Amri
How to convert UPPERCASE letter to lowercase and first letter Uppercase for each sentences like below only by using CSS?
如何仅使用 CSS 将每个句子的大写字母转换为小写字母和首字母大写字母？
From:THIS IS AN EXAMPLE SENTENCE.
来自：这是一个例句。
To:This is an example sentence.
To：这是一个例句。
Update:When I'm using text-transform: capitalize; The result still same.
更新：当我使用文本转换时：大写；结果还是一样。
回答by BoltClock
There is no sentence caps option in CSS. The other answers suggesting text-transform: capitalizeare incorrect as that option capitalizes each word.
CSS 中没有句子大写选项。建议的其他答案text-transform: capitalize不正确，因为该选项将每个单词大写。
Here's a crudeway to accomplish it if you only want the first letter of each elementto be uppercase, but it's definitely nowhere near actual sentence caps:
如果您只希望每个元素的第一个字母大写，这是一种粗略的方法来完成它，但它绝对远不及实际的句子大写：
p {
text-transform: lowercase;
}
p:first-letter {
text-transform: uppercase;
}
<p>THIS IS AN EXAMPLE SENTENCE.</p>
<p>THIS IS ANOTHER EXAMPLE SENTENCE.
AND THIS IS ANOTHER, BUT IT WILL BE ENTIRELY LOWERCASE.</p>
回答by Dennis G
You will not be able to capitalize the first word of each sentence with CSS.
您将无法使用 CSS 将每个句子的第一个单词大写。
CSS offers text-transformfor capitalization, but it only supports capitalize, uppercaseand lowercase. None of these will do what you want. You can make use of the selector :first-letter, which will apply any style to the first letter of an element - but not of the subsequent ones.
CSS 提供text-transform大写，但它只支持capitalize,uppercase和lowercase。这些都不会做你想做的。您可以使用选择器:first-letter，它将任何样式应用于元素的第一个字母 - 但不会应用于后续元素。
p {
text-transform: lowercase;
}
p:first-letter {
text-transform: capitalize;
}
<p>SAMPLE TEXT. SOME SENTENCE. SOMETHING ELSE</p>
<!-- will become this:
Sample text. some sentence. something else. -->
That is not what you want (and :first-letter is not cross-browser compatible... IE again).
The only way to do what you want is with a kind of programming language (serverside or clientside), like Javascript or PHP.
In PHP you have the ucwordsfunction (documented here), which just like CSS capitalizes each letter of each word, but doing some programming magic (check out the comments of the documentation for references), you are able to achieve capitalization of each first letter of each sentence.
这不是您想要的（并且 :first-letter 不是跨浏览器兼容的... IE 再次）。
做您想做的事情的唯一方法是使用一种编程语言（服务器端或客户端），例如 Javascript 或 PHP。在 PHP 中，你有一个ucwords函数（记录在这里），它就像 CSS 将每个单词的每个字母大写，但是做了一些编程魔术（查看文档的注释以获取参考），你可以实现每个单词的首字母大写每个句子。
The easier solution and you might not want to do PHP is using Javascript. Check out the following page - Capital Letters- for a full blown Javascript example of doing exactly what you want. The Javascript is pretty short and does the capitalization with some String manipulation - you will have no problem adjusting the capitalize-sentences.jsto your needs.
更简单的解决方案是使用 Javascript，您可能不想使用 PHP。查看以下页面 -大写字母- 一个完整的 Javascript 示例，可以完全按照您的要求执行操作。Javascript 很短，并通过一些字符串操作进行大写 - 您可以capitalize-sentences.js根据需要进行调整。
In any case: Capitalization should usually be done in the content itself not via Javascript or markup languages. Consider cleaning up your content (your texts) with other means. Microsoft Word for example has built in functions to do just what you want.
在任何情况下：大写通常应该在内容本身中完成，而不是通过 Javascript 或标记语言。考虑用其他方式清理您的内容（您的文本）。例如，Microsoft Word 具有内置功能，可以满足您的需求。
回答by shunryu111
convert element's textContent to lowercase with JS..
使用 JS 将元素的 textContent 转换为小写..
el.textContent = el.textContent.toLowerCase();
then just use css..
然后只需使用css..
text-transform: capitalize;
回答by ?smail Atkurt
If you want to use for <input>it will not work, for <input>or text area you need to use Javascript
如果要使用 for<input>不行，for<input>或 text area 需要使用 Javascript
<script language="javascript" type="text/javascript">
function capitaliseName()
{
var str = document.getElementById("name").value;
document.getElementById("name").value = str.charAt(0).toUpperCase() + str.slice(1);
}
</script>
<textarea name="NAME" id="name" onkeydown = "capitaliseName()"></textarea>
that is supposed to work well for <input>or <textarea>
这应该适用于<input>或<textarea>
回答by Valentin Flachsel
You can't do that purely with CSS. There is a text-transformattribute, but it only accepts none, capitalize, uppercase, lowercaseand inherit.
你不能纯粹用 CSS 来做到这一点。有一个text-transform属性，但它仅接受none，capitalize，uppercase，lowercase和inherit。
You might want to look into either a JS solution or a server-side solution for that.
您可能需要为此研究 JS 解决方案或服务器端解决方案。
回答by Saurabh Behl
Just Simply use
只需简单地使用
use css code: text-transform: uppercase;
使用 css 代码：文本转换：大写；
回答by ericsoco
I know the OP is asking for a CSS-only solution. But in case anyone landing here from the Magic Google ends up requiring a JavaScript solution, here's a one-liner:
我知道 OP 要求只使用 CSS 的解决方案。但是如果有人从 Magic Google 登陆这里最终需要一个 JavaScript 解决方案，这里有一个单行：
capitalize = str => str[0].toUpperCase() + str.substr(1);
capitalize = str => str[0].toUpperCase() + str.substr(1);
e.g.:
例如：
capitalize('foo bar baz'); // -> 'Foo bar baz'
capitalize('foo bar baz'); // -> 'Foo bar baz'
回答by Cengkuru Michael
Use mixins
使用混入
@mixin sentence-case() {
text-transform: lowercase;
&:first-letter {
text-transform: uppercase;
}
}
// USAGE:
.title {
@include sentence-case();
}回答by Fai Zal Dong
can simply use style inside element
可以简单地在元素内使用样式
<p style="text-transform: lowercase;">HI I AM NEW HERE</p>
<p style="text-transform: lowercase;">HI I AM NEW HERE</p>
回答by Jakub Konecki
If you can make all characters lowercase on the server than you can apply:
如果您可以将服务器上的所有字符都设为小写，则可以应用：
text-transform: capitalize
I don't think text-transform will work with uppercase letters as the input.
我认为 text-transform 不会使用大写字母作为输入。
