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."
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
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
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;
}
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;*
}
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>