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

Question

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

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

Answer 1

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

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