How to change width of heading using CSS?

Answer

To change width of heading using CSS, you can set the width style property for the heading 2 elements with the values like 150px, 50%, 5in, etc.

CSS Code

The following is the typical CSS code to change width of heading in HTML page using tag name h2.

Using width in pixels

h2 {
   width: 150px;
}

Using width in percentage of parent width

h2 {
   width: 50%;
}

Using width in inches

h2 {
   width: 5in;
}

Examples

We shall go through some working examples on how to change width of heading using CSS. In the following examples, you may change the value of width and Run the code to visually observe the changes made to the Heading 2 elements.

Example 1

This is an example on how to change width of heading using width in pixels.

You may edit the following code, and click on Run button.

Example 2

This is an example on how to change width of heading using width in percentage of parent width.

You may edit the following code, and click on Run button.

Example 3

This is an example on how to change width of heading using width in inches.

You may edit the following code, and click on Run button.