在 CSS 中将第一个字符设为大写答案

【问题标题】：Make the first character Uppercase in CSS在 CSS 中将第一个字符设为大写
【发布时间】：2011-04-07 07:18:44
【问题描述】：

有没有办法让 CSS 中标签中的第一个字符大写。

这是我的 HTML：

<a class="m_title" href="">gorr</a>
<a class="m_title" href="">trro</a>
<a class="m_title" href="">krro</a>
<a class="m_title" href="">yrro</a>
<a class="m_title" href="">gwwr</a>

【问题讨论】：

指定 - 第一个字符并且只有第一个字符。这使得 text-transform: capitalize; 在有多个单词时不够用

标签： css

【解决方案1】：

有一个属性：

a.m_title {
    text-transform: capitalize;
}

如果您的链接可以包含多个单词，并且您只希望第一个单词的第一个字母为大写，请改用 :first-letter 并进行不同的转换（尽管这并不重要）。请注意，为了使 :first-letter 工作，您的 a 元素需要是块容器（可以是 display: block、display: inline-block 或一个或多个属性的任何其他各种组合）：

a.m_title {
    display: block;
}

a.m_title:first-letter {
    text-transform: uppercase;
}

【讨论】：

@alanjds：是的，它适用于所有支持 CSS 的 IE 版本。这是非常古老的技术。
您可能想要使用双分号，请参阅css-tricks.com/almanac/selectors/f/first-letter
@Voles：当然，如果您不需要支持 IE8 和更早版本。并不是说如果你愿意就不能使用双冒号。（对于它的价值，在两年半前发布这个答案时，我的个人政策是默认支持 IE8。今天我不再这样做了。）
请注意，如果 display: block 要求（谁知道这是为什么）使这变得困难，:first-letter 也适用于 display: inline-block。
@Henry Garcia De Guzman：因为这会将所有内容都大写，而不仅仅是第一个字母（每个单词或句子或其他任何内容）。

【解决方案2】：

请注意，::first-letter 选择器不适用于内联元素，因此它必须是 block 或 inline-block，如下所示：

.m_title {display:inline-block}
.m_title:first-letter {text-transform: uppercase}

【讨论】：

在我的情况下，整个文本已经大写，所以我必须将 text-transform: lowercase 添加到 .m_title ，现在它可以完美运行了！

【解决方案3】：

CSS :first-letter Selector

或：

text-transform: capitalize;

【讨论】：

【解决方案4】：

先小写：

.m_title {text-transform: lowercase}

然后将其首字母大写：

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

"text-transform: capitalize" 适用于一个单词；但如果你想用于句子，这个解决方案是完美的。

示例：

.m_title {
  display: inline-block; /* Thanks to Fanky (https://stackoverflow.com/users/2095642/fanky) */
  
  text-transform: lowercase
}

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

<a class="m_title" href="">gorr</a>
<a class="m_title" href="">trro</a>
<a class="m_title" href="">krro</a>
<a class="m_title" href="">yrro</a>
<a class="m_title" href="">gwwr</a>

【讨论】：

:first-letter 不适用于inline 元素，如果是这种情况，请设置为display:inline-block。 (stackoverflow.com/questions/7631722/…)
你搞定了！我有一个完整的大写字母和这个支持！

【解决方案5】：

我建议使用

#selector {
    text-transform: capitalize;
}

或

#selector::first-letter {
    text-transform: uppercase;
}

顺便看看这个 w3schools 链接：http://www.w3schools.com/cssref/pr_text_text-transform.asp

【讨论】：

很好的答案，但这绝对是不是 w3c 文档的链接。
嘿，请注意：text-transform 'initial' 并不意味着“首字母大写”。相反，它的意思是“恢复到该属性的初始默认值”。
谢谢，我已经应用了两个推荐的修复程序。

【解决方案6】：

<script type="text/javascript">
     $(document).ready(function() {
     var asdf = $('.capsf').text();

    $('.capsf').text(asdf.toLowerCase());
     });
     </script>
<div style="text-transform: capitalize;"  class="capsf">sd GJHGJ GJHgjh gh hghhjk ku</div>

【讨论】：

这是我的工作。概念 ..paragraph 每个单词显示首字母大写

【解决方案7】：

我建议您在 CSS 中使用以下代码：

    text-transform:uppercase;

确保你把它放在你的课堂上。

【讨论】：

【解决方案8】：

.first-letter-capital {text-transform:initial;}

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。