Question

我在给定元素中保留了两个span，它们之间没有空格。我想将每个span中包含的第一个字母大写。我该怎么做？

在此JSFiddle我使用的是text-transform规则，但正如您所看到的那样，它不起作用。

Answer 1

添加display: inline-block

.first, .second {
    text-transform: capitalize; 
    display: inline-block;
}

链接到小提琴https://jsfiddle.net/9s2f1mrj/2/

Answer 2

text-transform寻找空格。由于您没有空格字符，因此即使它位于新标记中，也不会将第一个字符大写。原因是，两个标签的textContent一起，不会给出两个单词，而是一个单词。

作为欺骗浏览器的解决方法，将span设置为inline-block会触发它被视为两个字：

.first, .second {display: inline-block;}

以上作品。

＆＃13;

.first, .second {
  text-transform: capitalize;
  display: inline-block;
}

＆＃13;

<span class="first">first</span><span class="second">second</span>

＆＃13;

Answer 3

这应该适合你。

.first, .second {
    display: inline-block;
    text-transform: capitalize;
}

我希望它有所帮助!!

Answer 4

这是使用伪::first-letter的另一个解决方案。但是

::first-letter伪元素仅对显示值为 block ， inline-block ， table-cell <的元素有效em>， list-item 或 table-caption 。在所有其他情况下，::first-letter无效。

所以我的建议是：

span { display: inline-block; } span::first-letter { text-transform: uppercase; }

<span class="first">first</span><span class="second">second</span>

如何利用跨度元素

4 个答案: