steven steven - 6 months ago 18
CSS Question

Make first letter capital in sentence which is occuring after blank space and first letter by CSS

I want to update the letter case in the output. I am having this type of input string:

Input:

<style>
p {
text-transform: lowercase;
}

p:first-letter {
text-transform: uppercase;
}
</style>


<p>HELLO I AM HERE</p>


Current Output

Hello i am here


Desired Output:

Hello I Am Here


The CSS is not working for me.

Answer

Can't really do it with CSS alone without tedious wrapping of each word in a <span> tag, but JS can do the trick:

var nodes = document.querySelectorAll('.test');

Array.prototype.forEach.call(nodes, function(node) {
  node.textContent = node.textContent.split(' ').map(function(word) {
    return word[0].toUpperCase() + word.slice(1).toLowerCase();
  }).join(' ');
});
<p class='test'>HELLO I AM HERE</p>
<p class='test'>HELLO I AM HERE AGAIN</p>
<p class='test'>HELLO I AM HERE AGAIN AND AGAIN</p>