steven steven - 2 years ago 74
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:


p {
text-transform: lowercase;

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


Current Output

Hello i am here

Desired Output:

Hello I Am Here

The CSS is not working for me.

Answer Source

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');, 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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download