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

Réponses:

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