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

时间:2010-12-01 08:04:55

标签: html css

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

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

这是一个例句。

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

12 个答案:

答案 0 :(得分:78)

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>

答案 1 :(得分:14)

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

CSS为大写提供text-transform,但它仅支持capitalizeuppercaselowercase。这些都不会做你想要的。您可以使用选择器: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内置了可以满足您需求的功能。

答案 2 :(得分:6)

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

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

然后只使用css ..

text-transform: capitalize;

答案 3 :(得分:3)

如果您要使用<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>

答案 4 :(得分:0)

你不能纯粹用CSS做到这一点。有一个text-transform属性,但它只接受nonecapitalizeuppercaselowercaseinherit

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

答案 5 :(得分:0)

只需使用

即可

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

答案 6 :(得分:0)

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

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

e.g:

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

答案 7 :(得分:0)

使用mixins

&#13;
&#13;
@mixin sentence-case() {
  text-transform: lowercase;
  &:first-letter {
    text-transform: uppercase;
  }
}

// USAGE:
.title {
  @include sentence-case();
}
&#13;
&#13;
&#13;

答案 8 :(得分:-1)

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

text-transform: capitalize

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

答案 9 :(得分:-1)

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

p text-transform: lowercase;

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

答案 10 :(得分:-1)

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

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

答案 11 :(得分:-3)

<强>简单:

text-transform: capitalize;