Question

如何通过使用CSS将大写字母转换为小写和大写字母大写，如下所示？

发件人： 这是一个例子句子。

要这是一个例句。

更新当我使用text-transform：capitalize; 结果仍然相同。

Answer 1

CSS中没有句子大写选项。建议text-transform: capitalize的其他答案不正确，因为该选项会大写每个单词。

如果您只希望每个元素的第一个字母为大写，那么这是一种粗略方式来完成它，但它肯定远不及实际的句子上限：

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>

Answer 2

您将无法使用CSS将每个句子的第一个单词大写。

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. -->

这不是你想要的（并且：第一个字母不是跨浏览器兼容的......再次IE）做你想要的唯一方法是使用一种编程语言（服务器端或客户端），如Javascript或PHP。在PHP中你有ucwords函数（documented here），就像CSS大写每个单词的每个字母一样，但做一些编程魔术（查看文档的注释以供参考），你就可以了实现每个句子每个首字母的大写。

更简单的解决方案，你可能不想做PHP就是使用Javascript。请查看以下页面 - Capital Letters - 了解完全按照您的意愿执行的完整Javascript示例。 Javascript很短，并且通过一些字符串操作进行大写 - 您可以根据需要调整capitalize-sentences.js。

无论如何：资本化通常应该在内容本身中完成，而不是通过Javascript或标记语言。考虑用其他方法清理您的内容（您的文本）。例如，Microsoft Word内置了可以满足您需求的功能。

Answer 3

使用JS ..将元素的textContent转换为小写。

el.textContent = el.textContent.toLowerCase();

然后只使用css ..

text-transform: capitalize;

Answer 4

如果您要使用<input>，则无法使用，<input>或文字区域需要使用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>

应该适用于<input>或<textarea>

Answer 5

你不能纯粹用CSS做到这一点。有一个text-transform属性，但它只接受none，capitalize，uppercase，lowercase和inherit。

您可能希望查看JS解决方案或服务器端解决方案。

Answer 6

只需使用

即可

使用css代码：text-transform：uppercase;

Answer 7

我知道OP正在寻求一个仅限CSS的解决方案。但是如果从魔术谷歌到这里的任何人最终都需要一个JavaScript解决方案，那么这是一个单行：

capitalize = str => str[0].toUpperCase() + str.substr(1);

e.g：

capitalize('foo bar baz'); // -> 'Foo bar baz'

Answer 8

使用mixins

＆＃13;

@mixin sentence-case() {
  text-transform: lowercase;
  &:first-letter {
    text-transform: uppercase;
  }
}

// USAGE:
.title {
  @include sentence-case();
}

＆＃13;

Answer 9

如果您可以使服务器上的所有字符都小于您可以应用的字符：

text-transform: capitalize

我认为text-transform不会以大写字母作为输入。

Answer 10

如果在大写文本上使用它;

p text-transform: lowercase;

然后显示文本，它是小写但如果你复制那个较低的文本，并粘贴它，它会改回原来的大写。

Answer 11

可以简单地在元素中使用样式

<p style="text-transform: lowercase;">HI I AM NEW HERE</p>

Answer 12

<强>简单：

text-transform: capitalize;

使用CSS将大写字母转换为句子中的小写字母和第一大写字母

12 个答案: