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

255

有没有一种方法可以使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>

展开摘要

css

— 享受生活
source

2

要指定-第一个字符，仅第一个字符。这使得text-transform: capitalize;具有多话的时候不够

— wiktus239

622

有一个属性：

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;
}

— BoltClock
source

3

@alanjds：是的，它可以在支持CSS的每个IE版本中使用。这是非常古老的技术。

— BoltClock

3

您可能要使用双半冒号，请参阅css-tricks.com/almanac/selectors/f/first-letter

— ndequeker 2013年

5

@Voles：当然，如果您不需要支持IE8和更早版本。并不是说您想使用双冒号。（对于它的价值，在两年半前发布此答案时，我的个人政策是默认情况下支持IE8。今天我不再支持。）

— BoltClock

1

请注意，如果display: block需求（谁知道为什么如此）使此困难，:first-letter也可以使用display: inline-block。

— Mitya 2014年

1

@Henry Garcia De Guzman：因为那将所有内容都大写，而不仅仅是（每个单词或句子的首字母）。

— BoltClock

55

请注意，::first-letter选择器不适用于嵌入式元素，因此必须为block或inline-block，如下所示：

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

— 日志
source

1

就我而言，整个文本已经大写了，所以我不得不添加text-transform：.m_title小写字母，现在它可以完美地工作了！

— 公正

34

CSS：首字母选择器

要么：

text-transform: capitalize;

— 阿姆·埃尔加希（Amr Elgarhy）
source

15

我建议使用

#selector {
    text-transform: capitalize;
}

要么

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

顺便说一句，检查此w3schools链接：http : //www.w3schools.com/cssref/pr_text_text-transform.asp

— 毛里齐奥·巴塔吉尼（Maurizio Battaghini）
source

2

好的答案，但这绝对不是 w3c文档的链接。

— 斯蒂芬，

1

嘿，请注意：文本转换“首字母”并不意味着“首字母大写”。相反，它的意思是“恢复为该属性的初始默认值”。

— Marcos Buarque '18年

谢谢，我已应用了两个建议的修复程序。

— Marcos Buarque '18

5

首先使其小写：

.m_title {text-transform: lowercase}

然后将其首字母大写：

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

“文本转换：大写”适用于一个单词；但是，如果您想使用句子，则此解决方案非常理想。

— 奥兹古尔
source

2

：first-letter不适用于inline元素，display:inline-block如果是这种情况，请设置为。（stackoverflow.com/questions/7631722/...）

— Fanky

1

<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>

— 娜娜·塞卡（Gnana Sekar）
source

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

— Gnana Sekar

-2

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

    text-transform:uppercase;

确保将其放在班级中。

— 凯文·戴维斯
source