Max-Width

In CSS, you can set the maximum width of an element using the max-width property. The max-width property specifies the maximum width of an element can have, preventing it from growing larger than the specified value.
This is particularly useful for responsive web design, as it helps control the layout of your web page on different screen sizes and devices.

Syntax:

max-width: none | length | initial | inherit;

The values of CSS property are defined as:

none: In CSS, if you want an element to have no maximum width and to be able to grow to the full width available to it, you can use the none value.
length: The length value specifies the length of max-width in pixels, centimetres, pt, etc.
initial: It sets the default value.
inherit: It is used to inherit the property from its parent.

Example:

In the below example, there are 4 paragraph elements with the content.
we use the max-width property to set the maximum width of a paragraph.
first paragraph maximum width is 175px,and second paragraph maximum width is 20em,third paragraph 350pt and 4th paragraph is 10cm.
The content of the first paragraph is larger than the value of the max-width property, so in the output, as a result, the height of the first paragraph changed automatically.

<!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 javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com 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 javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com 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 javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com 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 javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com 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: