大写句子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;
}

因为当您尝试自动删除字母时，您将删除 contenteditable 中包含的所有文本。