Occasionally, it can be beneficial to restrict the width of an element within a specific range. Two CSS properties, max-width and min-width, are employed to define the upper and lower limits of the element's width.
The max-width attribute within CSS is employed to establish the maximum width of the content box within an element. This signifies that the content box's width can potentially be smaller than the max-width specified, but it is restricted from exceeding that value. Essentially, it defines the maximum limit for the width of the element.
If the content exceeds the maximum width, the element's height will adjust accordingly. When the content is smaller than the maximum width, this attribute remains inactive. This characteristic guarantees that the width value does not surpass the max-width value and prohibits negative values.
Syntax
max-width: none | length | initial | inherit;
The definitions of this CSS attribute are specified in the following manner.
none: It serves as the initial value that doesn't impose any constraints on the width of the content container.
The length parameter specifies the size of the max-width in pixels, centimeters, points, etc.
It assigns the attribute to its initial default value.
Inheritance: The property is passed down from its parent element.
Now, let's see an example of this CSS property.
Example
In this instance, there are four block elements containing text. We are specifying the maximum width of these blocks by utilizing the length measurement of the max-width CSS property. The initial block has a maximum width of 175 pixels, the second block has a maximum width of 20 ems, the third block has a maximum width of 350 points, and the fourth block has a maximum width of 10 centimeters.
The text within the initial paragraph exceeds the specified max-width limit, resulting in an automatic adjustment to the paragraph's height in the displayed output.
<!DOCTYPE html>
<html>
<head>
<title>
max-width property
</title>
<style>
p{
border: 4px solid blue;
background-color: lightblue;
font-size: 20px;
}
#px {
max-width: 175px;
}
#em {
max-width: 20em;
}
#pt {
max-width: 350pt;
}
#cm {
max-width: 10cm;
}
</style>
</head>
<body>
<h2> max-width: 175px; </h2>
<p id = "px">
Hi, Welcome to the C# Tutorial. This site is developed so that students may learn computer science related technologies easily. The C# Tutorial is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
<h2> max-width: 20em; </h2>
<p id = "em">
Hi, Welcome to the C# Tutorial. This site is developed so that students may learn computer science related technologies easily. The C# Tutorial is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
<h2> max-width: 350pt; </h2>
<p id = "pt">
Hi, Welcome to the C# Tutorial. This site is developed so that students may learn computer science related technologies easily. The C# Tutorial is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
<h2> max-width: 10cm; </h2>
<p id = "cm">
Hi, Welcome to the C# Tutorial. This site is developed so that students may learn computer science related technologies easily. The C# Tutorial is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
</body>
</html>
Output