Rendre le premier caractère majuscule en CSS

255

Existe-t-il un moyen de mettre le premier caractère en majuscule dans une étiquette en CSS.

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

Développer l'extrait

css

— profite de la vie
source

2

Pour spécifier - le premier caractère et UNIQUEMENT le premier. Ce qui text-transform: capitalize;ne suffit pas quand on a plusieurs mots

— wiktus239

623

Il y a une propriété pour ça:

a.m_title {
    text-transform: capitalize;
}

Si vos liens peuvent contenir plusieurs mots et que vous souhaitez uniquement que la première lettre du premier mot soit en majuscules, utilisez :first-letterplutôt une transformation différente (même si cela n'a pas vraiment d'importance). Notez que pour :first-lettertravailler vos aéléments doivent être des conteneurs de bloc (qui peut être display: block, display: inline-blockou toute une variété d'autres combinaisons d'une ou plusieurs propriétés):

a.m_title {
    display: block;
}

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

— BoltClock
source

3

@alanjds: Oui, cela fonctionne dans toutes les versions d'IE qui prennent en charge CSS. C'est une technologie très ancienne.

— BoltClock

3

vous voudrez peut-être utiliser un double point-virgule, voir css-tricks.com/almanac/selectors/f/first-letter

— ndequeker

5

@Voles: Bien sûr, si vous n'avez pas besoin de prendre en charge IE8 et les versions antérieures. Je ne dis pas que vous ne pouvez pas utiliser de double-points si vous le souhaitez (Pour ce que ça vaut, au moment de cette réponse qui a été postée il y a 2 ans et demi, ma politique personnelle était de supporter IE8 par défaut. Aujourd'hui je ne le fais plus.)

— BoltClock

1

Notez que si l' display: blockexigence (qui sait pourquoi) rend cela difficile, :first-letterfonctionne également avec display: inline-block.

— Mitya

1

@Henry Garcia De Guzman: Parce que cela met tout en majuscule, pas seulement la première lettre (de chaque mot ou phrase ou autre).

— BoltClock

55

Notez que le ::first-lettersélecteur ne fonctionne pas avec les éléments en ligne, il doit donc être soit blockou inline-block, comme suit:

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

— Logus
source

1

Dans mon cas, tout le texte était déjà en majuscules, j'ai donc dû ajouter text-transform: minuscule à .m_title et maintenant cela fonctionne parfaitement!

— hjuster

34

CSS: sélecteur de première lettre

ou :

text-transform: capitalize;

— Amr Elgarhy
source

15

Je suggère d'utiliser

#selector {
    text-transform: capitalize;
}

ou

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

Au fait, vérifiez ce lien w3schools: http://www.w3schools.com/cssref/pr_text_text-transform.asp

— Maurizio Battaghini
source

2

Bonne réponse, mais ce n'est certainement pas un lien vers la documentation w3c.

— Stephan

1

Hé, veuillez noter: la transformation de texte «initiale» ne signifie pas «mettre en majuscule la première lettre». Au contraire, cela signifie «revenir à la valeur par défaut initiale de cette propriété».

— Marcos Buarque

Merci, j'ai appliqué les deux correctifs recommandés.

— Marcos Buarque

5

Faites-le d'abord en minuscules:

.m_title {text-transform: lowercase}

Mettez ensuite la première lettre en majuscule:

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

"text-transform: capitalize" fonctionne pour un mot; mais si vous voulez utiliser des phrases, cette solution est parfaite.

— OzgurG
source

2

: la première lettre ne fonctionne pas avec les inlineéléments, définie sur display:inline-blocksi c'est votre cas. ( 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

ça me marche. concept ..paragraphe chaque mot dans l'affichage des premières majuscules

— Gnana Sekar

-2

Je vous recommande d'utiliser le code suivant en CSS:

    text-transform:uppercase;

Assurez-vous de le mettre dans votre classe.

— Kevin Davis
source