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

Question

如何只使用CSS将UPPERCASE字母转换为小写和大写字母,如下所示？

来自: 这是一个例子句子.

收件人: 这是一个例句.

更新: 当我使用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函数(在这里记录),就像CSS大写每个单词的每个字母,但做一些编程魔术(查看文档的注释参考),你可以实现每个首字母的大写每个句子.

更简单的解决方案,你可能不想做PHP就是使用Javascript.查看以下页面 - 大写字母 - 获取完整的Javascript示例,完全按照您的要求进行操作.Javascript非常简短,并且通过一些字符串操作进行大写 - 您可以capitalize-sentences.js根据需要进行调整.

在任何情况下:资本化通常应该在内容本身完成,而不是通过Javascript或标记语言.考虑用其他方法清理您的内容(您的文本).例如,Microsoft Word内置了可以满足您需求的功能.

Answer 3

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

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

然后只需使用CSS ..

text-transform: capitalize;