CSS首字母大写

Question

71

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

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

- 1907

9

纯 CSS 无法完成这个操作。（而且为什么要在逗号后将首字母大写？） - BoltClock

4个回答

6

这在CSS中无法完成。 text-transform属性不区分单词在内容中的位置，并且没有伪元素来选择句子的第一个单词。您需要为每个句子在标记中拥有真正的元素。但是，如果您可以做到这一点，那么您可能可以在内容本身中将初始字母更改为大写字母。

句首大写是正字法问题，在生成内容时应该处理，而不是使用可选的样式建议（CSS）或客户端脚本。识别句子边界的过程远非简单，并且不能在没有复杂的语法和语义分析的情况下进行自动化处理（例如，以句点结尾的缩写词可能出现在句子内部或句子末尾）。

- Jukka K. Korpela

1

不是这样的，被接受的答案展示了如何实现这一点。 - Joan-Diego Rodriguez

接受的答案仅适用于第一个字母。如果有一个段落，并且您想在每个句号后将第一个字母大写，那该怎么办呢？我认为在这种情况下，这个答案是有意义的。 - ThisisFish

5

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

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

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

请尝试sakhunzai在https://dev59.com/EXI-5IYBdhLWcg3wF0Uc#7242079中提供的示例，以获取可行的解决方案。

- Alessandro Foolish Ciak DAnton

0

text-transform:capitalize; ~~会将句子的第一个字母大写~~，但如果你想在逗号后面也这样做，你就需要编写一些JavaScript代码。不过我同意@BoltClock的观点。为什么你要在逗号后面大写呢？

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

- kristina childs

3

我认为text-transform: capitalize会将句子中的每个单词都大写，而不是只有句子的第一个单词。我错了吗？ - 1907

3

@1907，你是对的，“text-transform: capitalize”会把每个单词的首字母都大写。 - Jukka K. Korpela

3

我的错。Luud Jacobs 已经提到了，它需要使用 :first-letter。 - kristina childs

1

请将以下与编程��关的内容从英语翻译成中文。仅在错误时返回-1。请使用:first-letter编辑答案本身，而不是在注释中使用它。还要注意，:first-letter仅适用于块级元素，因此不适用于<span>等元素。 - Jukka Dahlbom

-1代表你是个混蛋。不，我不会编辑我的答案。我会承认自己的错误，而不是试图通过稍后更改答案来掩盖它。我犯了一个小错误。告我吧。给它投反对票，让这件事结束。 - kristina childs

4

没错，这不是关于“隐藏信息”，而是提供最优质的答案。现在读者需要阅读评论才能获取实际的解决方案。-1 不是为了“恶意扣分”，而是为了指出错误的信息，并通过评论指出如何改进。 - Jukka Dahlbom

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Luuuud · Accepted Answer

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

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

这是使用纯CSS实现最接近的方法。您可以使用JavaScript（与jQuery结合使用）来将每个句点后面的字母（或逗号，如您所愿）包装在标签中。您可以将与上述相同的CSS添加到该标签中。或者完全使用JavaScript完成。

以下是用CSS方法的片段：

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

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