CSS将所有大写单词中的第一个字母大写答案

【问题标题】：CSS Capitalize First Letter In All Caps WordCSS将所有大写单词中的第一个字母大写
【发布时间】：2017-06-20 04:53:00
【问题描述】：

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

所以把“TESTING”改成“Testing”？

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

css 属性 text-transform: capitalize 不起作用（将第一个字母大写，但忽略其余部分）。

【问题讨论】：

标签： html css

【解决方案1】：

是的，仅使用 CSS 即可，方法如下：

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

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

&lt;span class = "capitalize"&gt;TESTING&lt;/span&gt;

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

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

【讨论】：

【解决方案2】：

CSS：

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

HTML：

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

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

你可以尝试用Js来识别它。

【讨论】：

【解决方案5】：

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

https://jsfiddle.net/5wbe2ugq/

没有办法在 CSS 中查看第一个字母是否大写，但您可以通过以下方式确定：

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

.capitalize {
     text-transform: lowercase;
}

【讨论】：

【解决方案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 与 p,div,tables 等不同的是不能与 :first-letter 一起使用。如果你正在使用默认具有块的元素，那么您不需要像下面的代码那样放置 display:inline-block。

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

干杯，

【讨论】：