CSS max-width

The CSS max-width property is used to define the maximum width to an element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{background-color: purple; color: white; margin: 10px 0;}
      div.a{max-width: 120px;}
      div.b{max-width: 220px;}
      div.c{max-width: 220px;}
   </style>
</head>
<body>
   
   <div class="a">Lorem</div>
   <div class="b">Lorem</div>
   <div class="c">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
      Quibusdam minima aperiam reiciendis explicabo ratione quaerat assumenda
      voluptatem magni quasi sint.</div>

</body>
</html>

Output

Lorem

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam minima aperiam reiciendis explicabo ratione quaerat assumenda voluptatem magni quasi sint.

As you can see from above example, if the content width is greater than the defined maximum width, then the remaining content continues getting wrapped to next line.

CSS max-width Syntax

The syntax of max-width property in CSS, is:

max-width: x;

The value of x should be any of the following:

Length - We can define custom maximum width to an element like 140px, 12cm etc.
none - Used not to define the maximum width to an element. This is the default value
initial - Used to use the default value
inherit - Used to use the value inherited by the parent element

CSS Online Test

« Previous Tutorial Next Tutorial »