web-dev-qa-db-fra.com

Comment mettre en majuscule la première lettre uniquement en utilisant CSS dans chaque cas

Je veux mettre en majuscule uniquement la première lettre et les autres doivent être petits en utilisant CSS

La chaîne est:

SOMETHING BETTER 
sOMETHING bETTER
Something better

mais le résultat devrait être

Something Better

Est-ce possible en utilisant CSS? Pour mettre en majuscule la première lettre que j'utilise

text-transform: capitalize;

Mais pas en mesure de capitaliser dans chaque cas. "Je veux utiliser CSS parce que dans mon application, il a écrit partout codé en dur mais une classe a été appelée partout."

csswordcapitalization
15
Kabir

vous devriez pouvoir utiliser le :first-letter pseudo-élément:

.fl {
 display: inline-block;
}

.fl:first-letter {
 text-transform:uppercase;
}

<p>
 <span class="fl">something</span> <span class="fl">better</span>
</p>

rendements:

Quelque chose de mieux

36
mzmm56

Ce n'est pas possible avec CSS seul mais vous pouvez le faire avec Javascript ou PHP par exemple.

Dans [~ # ~] php [~ # ~] 

ucwords()

Et en Javascript 

function toTitleCase(str){
    return str.replace(/\w\S*/g, function(txt){
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}

Extrait de Convertir la chaîne en casse de titre avec JavaScript

7
zurfyx

Vous pouvez essayer une combinaison de cette réponse et du javascript (en utilisant jQuery)

HTML:

<div class='capitalize'>
    SOMETHING BETTER 
    SOMETHING BETTER 
    SOMETHING BETTER 
</div>

JAVASCRIPT:

$('.capitalize').each(function(){
    var text = this.innerText;
    var words = text.split(" ");
    var spans = [];
    var _this = $(this);
    this.innerHTML = "";
    words.forEach(function(Word, index){
        _this.append($('<span>', {text: Word}));
    });
});

CSS:

.capitalize {
    text-transform: lowercase;
}

.capitalize span {
    display: inline-block;
    padding-right: 1em  
}

.capitalize span:first-letter {
    text-transform: uppercase !important;
}

Démo: http://jsfiddle.net/maniator/ZHhqj/

6
Neal

Pourquoi ne pas simplement utiliser le pseudo-élément: première lettre dans css?

h2:first-letter{
text-transform: uppercase;

}

h2{

*your general code for h2 goes here;*

}
2
Abibi8

Oui, CSS n'est d'aucune aide ici. Bienvenue dans le monde de JavaScript, où tout est possible.

window.onload = function(){
  var elements = document.getElementsByClassName("each-Word")
  for (var i=0; i<elements.length; i++){
    elements[i].innerHTML = elements[i].innerHTML.replace(/\\b([a-z])([a-z]+)?\\b/gim, "<span class='first-letter'>$1</span>$2")
  }
}



  .first-letter {
    color: red;
  }



<p class="each-Word">First letter of every Word is now red!</p>
0
Ravi Joon