Example

Resize Property

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
    <title>Resize Property</title>

    <style>

        p {
            background-color: lightblue;
            border: 3px solid indigo;
            padding: 10px; 
            width: 75%;
            height: 200px;
            overflow: hidden;
        }

        .paraResize {
            resize: both;
        }

    </style>

</head>
<body>
<!--
    resize: property specifies if (and how) an element should be resizable by the user.
    resize property possible values are:
    - none : Default value. The user cannot resize the element.	
    - both : user can resize both the height and width of the element.	
    - horizontal : user can resize the width of the element.
    - vertical : user can resize the height of the element.	
    - initial : Sets this property to its default value.
    - inherit : Inherits this property from its parent element.
-->

    <h1>Demo: Resize property</h1>

    <p class="paraResize">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea dignissimos, accusantium minima inventore voluptas, exercitationem accusamus libero eveniet corrupti aliquid molestiae eius necessitatibus, rem hic enim adipisci harum? Id numquam eaque aperiam nihil sint, repudiandae corporis quia fuga mollitia veniam iusto dolorum aut rerum fugit! Facere harum veniam dolorem reprehenderit aliquid, nobis animi enim culpa tenetur fugit. Nesciunt voluptatum iste dolore maiores neque architecto ipsum saepe quidem debitis corrupti nam eius, accusantium eligendi dolor voluptatem? Vero nesciunt laborum dolorem cupiditate laboriosam placeat perspiciatis voluptate nisi! Id reiciendis reprehenderit nesciunt atque! Excepturi velit unde ea at qui aspernatur in, dignissimos aperiam quaerat inventore debitis totam ab quos, nesciunt aliquid ullam. Nihil, mollitia ducimus labore iste, nam praesentium odio doloribus veniam maxime quidem quisquam suscipit. Nam esse placeat facilis hic eos cupiditate iusto ea aperiam quibusdam sed nesciunt iste veritatis recusandae, excepturi enim debitis non saepe alias a perspiciatis temporibus, quidem dolorem. Possimus facere suscipit fugiat fuga dignissimos officiis quo dolorem fugit temporibus! Est impedit sequi repudiandae odio fugiat necessitatibus alias tempora, ipsam blanditiis unde cum cupiditate numquam. Quaerat odio natus officia deleniti quod maiores aliquam aut sint! Illo mollitia, deserunt ut debitis incidunt itaque optio voluptates corrupti eum necessitatibus, repellendus voluptatem molestias consequuntur animi saepe hic ipsam nostrum, impedit veniam inventore atque magni minima! Repellendus molestiae aspernatur provident quia temporibus deleniti, modi beatae autem, eius dignissimos ut necessitatibus consectetur perspiciatis! Reiciendis ipsum neque adipisci voluptas repellat similique quo, hic quae consequuntur laudantium. Ducimus ab nobis quaerat, itaque deserunt adipisci consectetur, quisquam cumque veritatis est qui numquam hic! Itaque, perspiciatis eos eaque nihil pariatur ipsum. Dignissimos eius molestias, quibusdam suscipit perspiciatis non incidunt dolorum modi sapiente aperiam saepe nobis ex ipsa quas enim error corporis temporibus hic at, excepturi natus explicabo totam? Aliquid corporis voluptas et consequatur quis ipsa. Nulla neque voluptates consequuntur at debitis? Inventore, repudiandae. Provident totam facilis repellat maiores odio soluta voluptate perspiciatis asperiores libero fugit officia possimus placeat adipisci maxime dicta, alias dolores quidem vitae reprehenderit quos eos voluptatem architecto? Quas veniam cumque esse, ea, consequatur delectus saepe consectetur obcaecati maiores perspiciatis repellendus magni asperiores. Et, error officia perferendis ut odio minima deserunt mollitia voluptate nesciunt perspiciatis molestiae repudiandae dignissimos beatae totam tempore, voluptates natus dolores consequuntur nulla inventore! Ipsam illum inventore aspernatur quisquam animi magni doloremque deserunt aliquid eaque harum ullam laborum ratione iusto, perspiciatis consequuntur? Veniam, accusantium. Nostrum placeat doloribus, magnam alias quidem eveniet nesciunt rerum.</p>

</body>
</html>
                    

Output

View original