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
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:

CSS Online Test


« Previous Tutorial Next Tutorial »