Question

是否可以将使用CSS全部大写的单词的首字母大写？

所以将“TESTING”更改为“Testing”？

<span class = "capitalize">TESTING</span>

css属性text-transform：capitalize不起作用（将首字母大写但忽略其余字母）。

Answer 1

是的，只有CSS，这是如何：

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

<span class = "capitalize">TESTING</span>

你会注意到我添加了display:inline-block，这是因为：

“第一行仅在块容器框中有意义，因此:: first-letter伪元素仅对显示值为block，inline-block，table-cell，list-的元素有效。项目或表格标题。“ source

Answer 2

CSS：

<style>
    p.capitaliseFirstLetterOnly {
        text-transform: lowercase;
    }
    p.capitaliseFirstLetterOnly::first-letter{
        text-transform: uppercase;
    }
</style>

HTML：

<p class="capitaliseFirstLetterOnly">TESTING.</p>

Answer 3

您可以按如下方式使用jquery：

<span class="capitalize">MYTEXT</span>
    <script>
        $(document).ready(function () {
            var txt = $(".capitalize").text().toLowerCase();
            txt = txt.toLowerCase().replace(/\b[a-z]/g, function (letter) {
                return letter.toUpperCase();
            });
            $(".capitalize").text(txt); 
        });        
    </script>

参考：

Uppercase first letter of variable

Answer 4

您可以尝试使用Js识别它。

Answer 5

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

https://jsfiddle.net/5wbe2ugq/

如果首字母大写，那么在CSS中无法看到，但是你可以通过以下方式确定它：

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

.capitalize {
     text-transform: lowercase;
}

Answer 6

 <style>
.capitalize{
  text-transform:lowercase;
  display: inline-block;
}
.capitalize::first-letter {
     text-transform:capitalize; 
}
</style>
<span class = "capitalize">TESTING</span>

确保添加 display：inline-block ，因为元素 span 不适用于：first-letter与p，div，tables等不同。如果你正在使用默认具有块的元素，然后您不需要像下面的代码那样放置 display：inline-block 。

 <style>
.capitalize{
  text-transform:lowercase; 
}
.capitalize::first-letter {
     text-transform:capitalize; 
}
</style>
<div class = "capitalize">TESTING</div>

干杯，

CSS资本化所有大写字母的第一个字母

6 个答案: