16

I want to Capitalize first letter only and other should be small using CSS

String is: 

SOMETHING BETTER 
sOMETHING bETTER
Something better

but the result should be

Something Better

Is this possible using CSS? To Capitalize first letter I am using 

text-transform: capitalize;

But not able to capitalize in each case. "I want to use CSS because in my application it has written every where hard coded but a class has been called everywhere."

Deduplicator
  • 44,692
  • 7
  • 66
  • 118
Kabir
  • 2,126
  • 5
  • 21
  • 24
  • 1
    Not possible with CSS alone. Even trying to cascade a `text-transform: lowercase` into a `text-transform: capitalize` won't work. If you want to use javascript, here's a link to an answer for that: http://stackoverflow.com/questions/196972/convert-string-to-title-case-with-javascript – kalley Jul 03 '13 at 14:19
  • 1
    In PHP - `ucwords("UPPERCASE WORD HERE");`, and the result : `Uppercase Word Here"` - http://www.php.net/manual/en/function.ucwords.php You can't do it using just CSS, because you can't do `lowercase` and then `capitalize`. – Nick R Jul 03 '13 at 14:21
  • possible duplicate of [make the first character uppercase in css](http://stackoverflow.com/questions/5577364/make-the-first-character-uppercase-in-css) – yoeriboven Jul 03 '13 at 14:21
  • 2
    @yoeriboven: I don't think it's the same. – BoltClock Jul 03 '13 at 14:22

5 Answers5

39

you should be able to use the :first-letter pseudo element:

.fl {
 display: inline-block;
}

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

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

yields:

Something Better

mzmm56
  • 1,264
  • 1
  • 14
  • 21
7

It is not possible with CSS alone but you can do it with Javascript or PHP for example.

In PHP

ucwords()

And in Javascript

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

Extracted from Convert string to title case with JavaScript

Community
  • 1
  • 1
zurfyx
  • 31,043
  • 20
  • 111
  • 145
6

You can try a combination of this answer and some javascript (using 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;
}

Demo: http://jsfiddle.net/maniator/ZHhqj/

Community
  • 1
  • 1
Naftali
  • 144,921
  • 39
  • 244
  • 303
4

Why dont you just use the :first-letter pseudo element in css?

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

}

h2{

*your general code for h2 goes here;*

}
Abibi8
  • 41
  • 1
-1

Yes, CSS is no help here. Welcome to the world of JavaScript, where anything is 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>
Amit Basliyal
  • 840
  • 1
  • 10
  • 28
Ravi Joon
  • 44
  • 7