Connect with us

CSS

How do you make each word in a text start with a capital letter?

How do you make each word in a text start with a capital letter
Spread the love

When a long text is written & it needs to be converted in Title case or Capital case then it becomes tedious to make it in capitals manually.

Using CSS, we can easily convert the text into Capital case or Title case.

This simply means that the first letter of the word will be converted into a Capital letter using CSS.

How do you make each word in a text start with a capital letter with CSS?

To make each word start with a capital letter CSS property text-transform: capitalize; is used.

Once this CSS property is set then it will be applied to all the text content within the element it is applied to.

In our below example, we apply this property with the help of a class to a div element.

CSS :-

	.text-capital {
		text-transform: capitalize;
	} 

HTML :-

	<div>
		this is a normal text. it has no styles applied.
	</div>
	<br />
	<div class="text-capital">
		this is also a normal text. it has styles applied.
	</div> 

Result :-

How do you make each word in a text start with a capital letter with CSS

In CSS style, we have created a new class named text-capital with property text-transform: capitalize.

This class can be applied to any element on the page.

In the HTML code, we have applied the class to the 2nd div element.

As we can see in the Result image, the 2nd div

text is capitalized because of the class applied to it. The 1st div remains as it is unaffected.

CSS - text-transform Property

CSS text-transform Property is used to define the case of the words. There are 5 values that can be used for this property.

By default, none is applied to all elements. This means the words will display as they have been written without any modifications.

uppercase All the text will be displayed in uppercase.
lowercase All the text will be displayed in lowercase.
capitalize First character of all the words will be displayed in uppercase
none There will be no text transformation. The text will display as it is.
inherit The text will be displayed as per the parent element style.

HTML :-

	<div style="text-transform: uppercase;">uppercase - this is a text for demonstration purpose.</div>
	<div style="text-transform: lowercase;">lowercase - this is a text for demonstration purpose.</div>
	<div style="text-transform: capitalize;">capitalize - this is a text for demonstration purpose.</div>
	<div style="text-transform: none;">none - this is a text for demonstration purpose.</div>
	<div style="text-transform: inherit;">inherit - this is a text for demonstration purpose.</div> 

Result :-

CSS - text-transform Property

Summary

We have explained in this blog the use of text-transform CSS property for transforming the text in various different forms.

We have also cleared the point on "How to make each word in a text start with a capital letter".

Do comment below for any more queries.


Spread the love
Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *