CSS - max-height Property


CSS - max-height Property

  • The max height property is used in CSS to indicate the maximum height of an element. 
  • The estimation of the maximum height property can be in numbers, a length, or a rate.
  • Note: Maximum height property value overrides the height of an element.

Example :

p
{   
width: 400px;
max-height: 20px;
border: 3px solid blue;
}

Sample Code :

<!DOCTYPE html>
<html>
    <body>
        <p
style="width:400px;
                max-height:20px; 
                border:3px solid pink;">
                    Welcome To Wikitechy. Best E-Learning Website In the World.                     Wikitechy wants to reshape e-learning platform.
        </p>
    </body>
</html>

Code Explanation:


    In CSS, Width property is used to allocate a width for an element. Here we had specifies the width of a paragraph tag as 400 pixels.

    In CSS, max-height property defines the maximum height of an element. Here we had given 20pixels as maximum height for paragraph text.

    Border property creates a border around an element. Border values 3px solid pink defines the border strength, style and color respectively.

Output:


    Here the, the second line “World. Wikitechy wants to reshape e-learning platform” is prevented by max-height property from becoming larger than the value specified for max-height. So the text “Welcome To Wikitechy. Best   E-Learning Website In the “ has its dimensions such as width, max -height & border properties.