在CSS中将第一个字符大写

Question

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

- enjoylife

---

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

Answer 1

有一个属性可以实现这个功能：

a.m_title {
    text-transform: capitalize;
}

如果你的链接可能包含多个单词，并且你只想让第一个单词的第一个字母大写，那么请使用:first-letter与不同的变换（虽然这并不重要）。请注意，为了让:first-letter起作用，你的元素需要是块级容器（可以是display:block、display:inline-block或任何一种或多种属性的组合）：

a.m_title {
    display: block;
}

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

- BoltClock

---

是的，它适用于每个支持CSS的IE版本。这是非常古老的技术。 - BoltClock

你可能希望使用双分号，参见http://css-tricks.com/almanac/selectors/f/first-letter/。 - ndequeker

@Voles：当然，如果您不需要支持IE8及更早版本的浏览器。并不是说您不能使用双冒号语法，如果您想的话。（值得一提的是，在此回答发布的2年半前，我的个人政策 是 默认支持IE8。但今天我不再这样做。） - BoltClock

请注意，如果 display: block 的要求（谁知道为什么要这样做）使得这个操作困难，:first-letter 也可以与 display: inline-block 一起使用。 - Mitya

@Henry Garcia De Guzman：因为那会将所有字母都大写，而不仅仅是每个单词或句子的第一个字母。 - BoltClock

Answer 2

请注意，::first-letter 选择器不能与内联元素一起使用，因此必须是 block 或 inline-block，如下所示：

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

- Logus Graphics

---

在我的情况下，整个文本已经是大写了，因此我需要在“.m_title”中添加“text-transform: lowercase”来使其完美运行！ - hjuster

Answer 3

CSS :first-letter 选择器

或：

text-transform: capitalize;

- Amr Elgarhy

Answer 4

先将其转化为小写：

.m_title {text-transform: lowercase}

然后将其首字母大写：

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

"text-transform: capitalize" 可以用于单词，但如果你想用在整个句子上的话，这个解决方案是完美的。

Example:

.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 trro</a>
<a class="m_title" href="">krro</a>
<a class="m_title" href="">yrro</a>
<a class="m_title" href="">gwwr gwwr gwwr</a>

- OzgurG

---

如果您使用的是inline元素，:first-letter无法正常工作，请将其设置为display:inline-block。 (https://dev59.com/imsz5IYBdhLWcg3w0rZC) - Fanky

你成功了！我有一个完全大写的场景和这个后端！ - jerinisready

Answer 5

我建议使用

#selector {
    text-transform: capitalize;
}

或者

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

顺便提一下，请查看这个w3schools链接：http://www.w3schools.com/cssref/pr_text_text-transform.asp

- Maurizio Battaghini

---

不错的回答，但那绝对不是w3c文档的链接。 - Stephan

嘿，请注意：text-transform的“initial”并不意味着“将第一个字母大写”。相反，它意味着“恢复此属性的初始默认值”。 - Marcos Buarque

谢谢，我已经应用了推荐的两个修复方案。 - Marcos Buarque

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

- Gnana Sekar

---

It's Work Me. Concept. Paragraph. Each Word In Display First Letter Caps. - Gnana Sekar

Answer 7

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

    text-transform:uppercase; 

请确保将其放入您的类中。

- Kevin Davis

Answer 8

在 React Native 中也适用：

    textTransform: 'capitalize'

- Señor Ben

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community