大写句子CSS的第一个字母

Question

我希望将句子的第一个字母大写，并且如果可能的话，还要用逗号后的第一个字母。我想在这里添加代码：

.qcont {
    width: 550px;
    height: auto;
    float: right;
    overflow: hidden;
    position: relative;
}

Answer 1

您可以使用伪元素.qcont来大写:first-letter元素的第一个字母。

.qcont:first-letter{
  text-transform: capitalize
}

这是你最接近使用css的。你可以使用javascript（与jQuery结合）来包装一段时间之后的每个字母（或者你想要的逗号）span。您可以将上述相同的CSS添加到span。或者在javascript中一起完成。

这是css方法的一个片段：

.qcont:first-letter {
  text-transform: capitalize
}

<p class="qcont">word, another word</p>

Answer 2

这不能在CSS中完成。 text-transform属性根据内容中单词的位置没有区别，并且没有用于选择句子的第一个单词的伪元素。对于每个句子，您需要在标记中包含真实元素。但是如果你能做到这一点，那么你也可以将内容中的首字母改为大写。

句子开头的大写是一个拼写问题，应该在生成内容时完成，而不是使用可选的样式建议（CSS）或客户端脚本。识别句子边界的过程远非微不足道，并且通常不能在没有复杂的句法和语义分析的情况下自动执行（例如，以句点结尾的缩写可能出现在句子内或句子的末尾）。

Answer 3

如果您需要在contenteditable容器中大写第一个字母，则无法使用css属性

#myContentEditableDiv:first-letter {
    text-transform: capitalize;
}

因为当您尝试自动删除某个字母时，您将删除该知识中包含的所有文字。

请尝试在https://stackoverflow.com/a/7242079/6411398中使用sakhunzai提供的示例 一个有效的解决方案。

Answer 4

text-transform:capitalize; 会将句子的第一个字母大写，但是如果你也想用逗号做，那么你必须写一些javascript。不过我同意@BoltClock。为什么你想在逗号后用大写字母？

编辑：为了方便读者：text-transform:capitalize; 将句子的每个单词大写，而不仅仅是第一个单词。 您必须使用上面的:first-letter CSS选择器。