css - 如何将大写的句子转换为第一个单词大写？

Question

输入：我是一名学生
预期输出：我是一名学生
我如何使用 css 实现这一点？

Answer 1

p {
  text-transform: lowercase;
}
p:first-line {
  display: block;
  text-transform: capitalize;
}

<p>I AM A STUDENT</p>

Answer 2

如果文本以小写开头，则可以使用 CSS 的text-transform-property ：

p {
  text-transform: capitalize;
}

如果文本已经大写，不幸的是您只能将其转换为小写。或者，您可以::first letter像@Mr Lister 建议的那样使用 -selector 并将每个单词放入一个跨度中，如下所示：

p {
  text-transform: lowercase;
}

span {
  display: inline-block;
}

span::first-letter {
  text-transform: capitalize;
}

<p> <span>I</span> <span>AM</span> <span>A</span> <span>STUDENT</span> </p>

当然，除此之外，您可以使用本线程中讨论的JavaScript 来执行此操作，但这应该是最后的手段。