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

Question

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.

@steven you can do this with easily.please check my answer – Ankur Bhadania May 19 '16 at 13:22 — Ankur Bhadania, May 19 '16 at 13:22

timolawl · Accepted Answer · 2016-05-19T13:06:02.643

2

<p>HELLO I AM HERE</p>

Since your string is all capitalized, you 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>

edited May 19 '16 at 13:06

answered May 19 '16 at 12:32

timolawl

5,434
13
29

I have number of p with respect to class. How can i achieve this with js only. – steven May 19 '16 at 12:35
@steven you can `querySelectorAll` the class, iterate through each reference and apply the above JS code to each. – timolawl May 19 '16 at 12:36
Can you please create demo fiddle for me. Use data like this
TEST HELLO
TEST HELLO1
... and so on. – steven May 19 '16 at 12:47
@steven I'll update the Stack Snippet. Give me a moment. – timolawl May 19 '16 at 12:48
I don't want console. I want it changes text to desired place also. – steven May 19 '16 at 12:49
?? CSS can do this since ever : https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform CSS level1 https://www.w3.org/TR/CSS1/#text-transform – G-Cyrillus May 19 '16 at 12:59
@GCyrillus Doesn't work if everything is uppercase. Try it yourself. – timolawl May 19 '16 at 13:00
@ timolawl Thanks working for me..... already accepted ... :) – steven May 19 '16 at 13:00
Yep, just noticed about uppercase text :( – G-Cyrillus May 19 '16 at 13:01

Derek · Answer 2 · 2016-05-19T13:01:55.567

0

text-transform: capitalize

Is what you want.

Edit: if your initial string is all uppercase you may have to make it lowercase with javascript first...

edited May 19 '16 at 13:01

answered May 19 '16 at 12:56

Derek

1,826
18
25

That doesn't work with text that's all uppercase -> https://jsfiddle.net/Lupe1eeb/ – John Slegers May 19 '16 at 13:01
Actually this wouldn't work as his input is already in uppercase that wouldn't change anything – mjorissen May 19 '16 at 13:01

score 0 · Answer 3 · answered May 19 '16 at 13:04

Well, this is a straight answer:

pass input text into getCapitalize below javascript function and it will return you expected output-

var text = $(".capitalize").text();

var formattedText = getCapitalize(text); // use of function

$(".capitalize").text(formattedText);  // assign formatted text the container


 
function getCapitalize(text){  //formatter function
  
     var textArray = text.split(" ");

     for(i= 0; i<textArray.length; i++){
  
     textArray[i] = textArray[i][0].toUpperCase() + textArray[i].substr(1).toLowerCase();

     }
     return textArray.join(" ");      
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="capitalize">HELLO I AM HERE.</p>

Hoping this will help you:)

Ankur Bhadania · Answer 4 · 2016-05-19T13:30:54.227

0

You can do easily with this code.

$(document).ready(function(){
  $( "p.tolower" ).each(function( index ) {
   var text= $(this).text().toLowerCase();
   $(this).html(text);
  });});

p.tolower{text-transform: capitalize;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class='tolower'>HELLO I AM HERE</p>
<p class='tolower'>HELLO I AM HERE AGAIN</p>
<p class='tolower'>HELLO I AM HERE AGAIN AND AGAIN</p>

edited May 19 '16 at 13:30

answered May 19 '16 at 13:20

Ankur Bhadania

4,123
1
23
38

It is always print same output : Hello I Am Here..... – steven May 19 '16 at 13:29
my mistake :) i will update you 1 min – Ankur Bhadania May 19 '16 at 13:29
@steven now it's working fine please check – Ankur Bhadania May 19 '16 at 13:31

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

4 Answers4