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

Question

如何仅通过使用 CSS 将如下每个句子的大写字母转换为小写字母和首字母大写？

来自： 这是一个例句。

To： 这是一个例句。

更新： 当我使用文本转换时：大写；结果还是一样。

原文由 Hafizul Amri 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 BoltClock 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

CSS offers text-transform for capitalization, but it only supports capitalize , uppercase and 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. -->

那不是您想要的（并且 :first-letter 不跨浏览器兼容…再次是 IE）。

做你想做的事情的唯一方法是使用一种编程语言（服务器端或客户端），如 Javascript 或 PHP。在 PHP 中，你有 ucwords 函数（ 在此处记录），它就像 CSS 将每个单词的每个字母大写一样，但是做一些编程魔术（查看文档的注释以供参考），你能够实现每个句子的每个首字母大写。

更简单的解决方案，你可能不想做 PHP 是使用 Javascript。查看下一页 - Capital Letters - 一个完全成熟的 Javascript 示例，它 完全按照您的意愿行事。 Javascript 非常短，并且通过一些字符串操作来实现大写 - 您可以根据需要调整 capitalize-sentences.js 。

在任何情况下：大写通常应该在内容本身中完成，而不是通过 Javascript 或标记语言。考虑用其他方式清理您的内容（您的文本）。例如，Microsoft Word 具有内置函数来执行您想要的操作。

原文由 Dennis G 发布，翻译遵循 CC BY-SA 3.0 许可协议