First lowercase the text then capitalize it. Is it possible with CSS?

后端 未结 3 1008
醉酒成梦
醉酒成梦 2020-11-27 23:12

First lowercase the text then capitalize it. Is it possible with CSS?

Edit: Example: HELLO WORLD -> Hello World

Edit2: I have a lis

相关标签:
3条回答
  • 2020-11-27 23:27

    I not have permission to comment, so I'll write my experience as an answer.

    I have a problem with accentuated chars, solved puting '^' in the begin of regex and iterate each word of the text.

    '^' indicates to match only the first char of word.

    function captalize(s) {
        return s.toLowerCase().replace( /^\b./g, function(a){ return a.toUpperCase(); } );
    }
    
    var words = exampleText.split(" ");
    
    jQuery.each(words, function(index, value) {
           var w = capitalize(value);
           exampleText.append(w).append(" ");
    });
    
    0 讨论(0)
  • 2020-11-27 23:38

    This can be done if the text inside the element is only on one line, using the ::first-line pseudo-element:

    <h3>HELLO WORLD</h3>
    <style>
        h3 {
            text-transform: lowercase;
        }
    
        h3::first-line {
            text-transform: capitalize;
        }
    </style>
    
    0 讨论(0)
  • 2020-11-27 23:42

    Yep:

    .className {
        text-transform:capitalize;
    }
    

    Javascript:

    function capitalize(s){
        return s.toLowerCase().replace( /\b./g, function(a){ return a.toUpperCase(); } );
    };
    
    capitalize('this IS THE wOrst string eVeR');
    

    Stolen from here: Capitalize words in string

    0 讨论(0)
提交回复
热议问题