html - 将内联元素文本的首字母大写

Question

我read elsewhere以下内容应将内联元素文本的首字母大写(例如 <span> )。

但是，如果您运行代码片段，您会发现它不起作用。如果我更换 <span>用<div>它有效，但有没有办法在不更改元素类型的情况下将第一个字母大写？

.list .capitalize:first-letter {
  text-transform: capitalize;
  display: inline-block;
}

<div class="list">
  <span class="capitalize">capitalize me</span>
</div>

Answer 1

伪元素::first-letter只有在父元素是 block 元素时才有效，所以span必须是inline-block:

.list .capitalize {
  display: inline-block;
}
.list .capitalize::first-letter {
  /* you could use capitalize as well, but since it's just one letter, just use uppercase on it */
  text-transform: uppercase;
}

<div class="list">
  <span class="capitalize">capitalize me</span>
</div>