CODEWITHSUNDEEP
csstext
user2736812
user2736812

Reputation: 1331

First letter Capitalize and other letters in lower case in css?

<p>THIS IS SOMETEXT</p>

I want to make it look like This is sometext which the first letter of the paragraph is uppercase.
Is it possible in CSS?

Edit: All my text is in capital letters.

Upvotes: 21

Views: 61671

Answers (3)

Subeesh
Subeesh

Reputation: 201

Try This :

p {
  text-transform: lowercase;
}

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

Note

The parent of the text need to have the style block or inline-block or it wont work.

Upvotes: 20

Hashem Qolami
Hashem Qolami

Reputation: 99564

You could use text-transform in order to make each word of a paragraph capitalized, as follows:

p { text-transform: capitalize; }

It's supported in IE4+. Example Here.

16.5 Capitalization: the 'text-transform' property

This property controls capitalization effects of an element's text.

capitalize Puts the first character of each word in uppercase; other characters are unaffected.

Making each word of an uppercase text, capitalized:

The following was under this assumption:

I want to make it look like: This Is Sometext

You have to wrap each word by a wrapper element like <span> and use :first-letter pseudo element in order to transform the first letter of each word:

<p>
  <span>THIS</span> <span>IS</span> <span>SOMETEXT</span>
</p>

p { text-transform: lowercase; }    /* Make all letters lowercase */
p > span { display: inline-block; } /* :first-letter is applicable to blocks */

p > span:first-letter {
  text-transform: uppercase;        /* Make the first letters uppercase      */
}

Example Here.

Alternatively, you could use JavaScript to wrap each word by a <span> element:

var words = $("p").text().split(" ");
$("p").empty();

$.each(words, function(i, v) {
    $("p").append($("<span>").text(v)).append(" ");
});

Example Here.

Making the first letter of an uppercase text, capitalized:

This seems to be what you are really looking for, that's pretty simple, all you need to do is making all words lowercase and then transforming the first letter of the paragraph to uppercase:

p { text-transform: lowercase; }

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

Example Here.

Upvotes: 48

user2736812
user2736812

Reputation: 1331

I figured it out

p {
    text-transform: lowercase;
}

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

Upvotes: 3

Related Questions