What to do when an element's content might be larger than the amount of space allocated to it?


Use the CSS overflow property to solve this issue of a content exceeding the allocated space. You can try to run the following code to solve the issue −

Example

<html>
   <head>
   </head>
   <style>
      .scroll{
         display:block;
         border: 2px solid green;
         padding:10px;
         margin-top:10px;
         width:300px;
         height:50px;
         overflow:scroll;
      }
      .auto{
         display:block;
         border: 2px solid green;
         padding:10px;
         margin-top:10px;
         width:300px;
         height:50px;
         overflow:auto;
      }
      </style>
      <body>
         <p>Example of scroll value:</p>
         <div class = "scroll">
            This is Demo Content. This is Demo Content. This is Demo Content.
            This is Demo Content. This is Demo Content. This is Demo Content.
            This is Demo Content. This is Demo Content. This is Demo Content.
            This is Demo Content. This is Demo Content. This is Demo Content.
         </div>
      <br />
   </body>
</html>

karthikeya Boyini
karthikeya Boyini

I love programming (: That's all I know

Updated on: 04-Mar-2020

43 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements