css - 将句子的第一个字母大写 CSS

Question

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

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

score 189 · Accepted Answer

.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>

score 7 · Accepted Answer

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

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

score 5 · Accepted Answer

如果您需要将 contenteditable 容器中的第一个字母大写，则不能使用 css 属性

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

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

请尝试使用 sakhunzai 在https://stackoverflow.com/a/7242079/6411398 中提供的示例以获得可行的解决方案。

score 0 · Accepted Answer

text-transform:capitalize; ~~将大写句子的第一个字母~~，但如果你也想为逗号做它，你将不得不编写一些 javascript。不过，我同意@BoltClock。为什么你要在逗号后大写？

编辑：为了读者：text-transform:capitalize;将大写句子的每个单词，而不仅仅是第一个单词。您必须将:first-letterCSS 选择器与上述内容一起使用。

4 回答 4