CSS - Max-Width

The max-width property in CSS is used to set the maximum width of an element.

If the content of an element is more than max-width then the content of the element would be displayed in multiple lines.

Sounds Complicated?

Let us make it clear with the below examples.

Max-width property in CSS with numeric value

We can specify a numeric value for max-width property and the width would be adjusted accordingly.

Example :

<html>
<head>
	<style>
		p {
			border-style: solid;
  			max-width: 100px;
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>

Output :

So, if you see the above output, the text, This is the first paragraph. is displayed in two lines.

That is because we have set the max-width of the <p> element as 100px.

<style>
	p {
		border-style: solid;
		max-width: 100px;
	}
</style>

And the paragraph fits within that width.

Max-width property in CSS with value in %

Say you want your HTML element to be displayed covering half portion of the screen. In such cases you can use the value of max-width property in %.

Since in this case we want our element to be displayed covering half portion of the screen, we can use the value of max-width property as 50%.

Example :

<html>
<head>
	<style>
		p {
			border-style: solid;
  			max-width: 50%;
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>

Output :

So, if you look at the above output, the <p> element is displayed covering 50% of the screen width.

❮❮ PREV NEXT ❯❯