CSS text-transform capitalize on all caps

Question

Here is my HTML    lt a href     class  link  gt small caps lt  a gt   amp    lt a href     class  link  gt ALL CAPS lt  a gt    Here is my CSS    link  text-transform  capitalize     The output is   Small Caps  amp  ALL CAPS   and I want the output to be   Small Caps  amp  All Caps   Any ideas

User · Answer

If the data is coming from a database  as in my case  you can lower it before sending it to a select list drop down list  Shame you can t do it in CSS

User · Answer

Interesting question    capitalize transforms every first letter of a word to uppercase  but it does not transform the other letters to lowercase  Not even the  first-letter pseudo-class will cut it  because it applies to the first letter of each element  not each word   and I can t see a way of combining lowercase and capitalize to get the desired outcome    So as far as I can see  this is indeed impossible to do with CSS    Harmen shows good-looking PHP and jQuery workarounds in his answer

User · Answer

all wrong it does exist --  font-variant  small-caps   text-transform capitalize  just the first letter cap

User · Answer

May be useful for java and jstl    Initialize variable with localized message   After that it is possible to use it in jstl toLowerCase function  Transform with CSS    In JSP  1    lt fmt message key  some key  var  item   gt    2    lt div class  content  gt     lt a href     gt   fn toLowerCase item   lt  a gt   lt  div gt    In CSS  3    content     text-transform capitalize

User · Answer

There is no way to do this with CSS  you could use PHP or Javascript for this   PHP example     text    ALL CAPS    text   ucwords strtolower  text       All Caps   jQuery example  it s a plugin now        Uppercase every first letter of a word jQuery fn ucwords   function       return this each function        var val     this  text    newVal           val   val split            for var c 0  c  lt  val length  c            newVal    val c  substring 0 1  toUpperCase     val c  substring 1 val c  length     c 1  val length                          this  text newVal               a link   ucwords

User · Answer

captialize only effects the first letter of the word  http   www w3 org TR CSS21 text html propdef-text-transform

User · Answer

The PHP solution  in backend    string    UPPERCASE   lowercase   strtolower  string   echo ucwords  lowercase

User · Answer

I know this is a late response but if you want to compare the performance of various solutions I have a jsPerf that I created   Regex solutions are the fastest for sure   Here is the jsPerf  https   jsperf com capitalize-jwaz  There are 2 regex solutions   The first one uses  b a-z  g  Word boundary will capital words such as non-disclosure to Non-Disclosure   If you only want to capitalize letters that are preceded by a space then use the second regex       a-z   s a-z   g

User · Answer

Convert with JavaScript using  toLowerCase   and capitalize would do the rest

User · Answer

JavaScript   var links   document getElementsByClassName  link    for  var i   0  i  lt  links length  i        links i  innerHTML   links i  innerHTML toLowerCase        CSS    link   text-transform  capitalize        What Khan  ended up doing   which is cleaner and worked for me  is down in the comments of the post marked as the answer

User · Answer

You can almost do it with   link     text-transform  lowercase     link first-letter   link first-line     text-transform  uppercase     It will give you the output  Small Caps All Caps

User · Answer

I d like to sugest a pure CSS solution that is more useful than the first letter solution presented but is also very similar    x000D   x000D   link   x000D    text-transform  lowercase  x000D  display  inline-block  x000D    x000D   x000D   link  first-line   x000D    text-transform  capitalize  x000D    x000D   lt div class  link  gt HELLO WORLD  lt  div gt  x000D   lt p class  link  gt HELLO WORLD  lt  p gt  x000D   lt a href     class  link  gt HELLO WORLD     now working    lt  a gt  x000D   x000D   x000D    Although this is limited to the first line it may be useful for more use cases than the first letter solution since it applies capitalization to the whole line and not only the first word   all words in the first line  In the OP s specific case this could have solved it   Notes  As mentioned in the first letter solution comments  the order of the CSS rules is important  Also note that I changed the  lt a gt  tag for a  lt div gt  tag because for some reason the pseudo-element   first-line doesn t work with  lt a gt  tags natively but either  lt div gt  or  lt p gt  are fine  EDIT  the  lt a gt  element will work if display  inline-block  is added to the  link class  Thanks to Dave Land for spotting that   New Note  if the text wraps it will loose the capitalization because it is now in fact on the second line  first line is still ok

User · Answer

if you are using jQuery  this is one a way to do it       link   each function           this  css  text-transform   capitalize   text   this  text   toLowerCase           Here is an easier to read version doing the same thing     Iterate all the elements in jQuery object     link   each function            get text from element and make it lower-case     var string     this  text   toLowerCase           set element text to the new string that is lower-case       this  text string          set the css to capitalize       this  css  text-transform   capitalize          Demo

User · Answer

After researching a lot I found jquery function expression to change text in first letter in uppercase only  I modify that code accordingly to make it workable for input field  When you will write something in input field and then move to another filed or element  the text of that field will change with 1st-letter capitalization only  No matter user type text in complete lower or upper case capitalization   Follow this code   Step-1  Call jquery library in html head    lt script src  https   ajax googleapis com ajax libs jquery 1 11 3 jquery min js  gt  lt  script gt    Step-2  Write code to change text of input fields     lt script gt    document  ready function        edit-submitted-first-name  edit-submitted-last-name  edit-submitted-company-name   edit-submitted-city   focusout function    var str   this  val    str   str toLowerCase   replace   b a-z  g  function letter        return letter toUpperCase          this  val str              lt  script gt    Step-3  Create HTML input fields with same id s you use in jquery code like    lt input type  text  id  edit-submitted-first-name  name  field name  gt    The id of this input field is  edit-submitted-first-name  It using in jquery code in step-2      Result  Make sure the text will change after you move your focus from that input field at another element  Because we using focus out event of jquery here  Result should like this  User Type   thank you  it will change with  Thank You       Best of luck

User · Answer

You can do it with css first-letter  eg I wanted it for the Menu   a  display inline-block  text-transorm uppercase   a  first-letter  font-size 50px     It only runs with block elements - therefore the inline-block

[css] CSS text-transform capitalize on all caps

Examples related to css