What is overflow and how to use it
Overflow is a CSS property that controls how content is displayed when it exceeds the size of an element. It is used to avoid content getting cut off or overlapping with other elements.
Syntax
selector { overflow: visible | hidden | scroll | auto; }
The values for the overflow property are:
visible:
Default value. Content overflows the element.hidden:
Content that exceeds the element’s dimensions is hidden.scroll:
Adds a scrollbar to the element to scroll through the content that exceeds the element’s dimensions.auto:
Adds scrollbar only if necessary.
Here are some examples of how to use the overflow property in HTML with CSS:
Example 1: Hidden Overflow
In this example, we have set the overflow property to hidden. The content exceeding the element’s dimensions will be hidden:
<div style="width: 200px; height: 100px; overflow: hidden;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis elit ut ultricies rutrum. Aliquam laoreet quis ipsum non molestie. Aliquam euismod elit auctor sapien bibendum, a dapibus quam molestie. Pellentesque id elementum justo. Integer ullamcorper mi lectus, eget maximus tellus hendrerit nec. Integer condimentum mollis sem, id malesuada metus tristique in. Nam bibendum varius metus a pulvinar. Vestibulum rutrum leo quis magna bibendum, nec pharetra tortor ultrices. Sed pharetra massa erat, vel dignissim sem venenatis vitae. Maecenas fermentum nisl a ipsum vestibulum elementum. Cras eu turpis quis urna mollis dignissim eget vitae nulla. Nulla facilisi. Nullam blandit interdum neque, non interdum mauris congue vel.</p> </div>
Example 2: Scrollable Overflow
In this example, we have set the overflow property to scroll, which adds a scrollbar to the element so that users can scroll through the content exceeding the element’s dimensions:
<div style="width: 200px; height: 100px; overflow: scroll;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis elit ut ultricies rutrum. Aliquam laoreet quis ipsum non molestie. Aliquam euismod elit auctor sapien bibendum, a dapibus quam molestie. Pellentesque id elementum justo. Integer ullamcorper mi lectus, eget maximus tellus hendrerit nec. Integer condimentum mollis sem, id malesuada metus tristique in. Nam bibendum varius metus a pulvinar. Vestibulum rutrum leo quis magna bibendum, nec pharetra tortor ultrices. Sed pharetra massa erat, vel dignissim sem venenatis vitae. Maecenas fermentum nisl a ipsum vestibulum elementum. Cras eu turpis quis urna mollis dignissim eget vitae nulla. Nulla facilisi. Nullam blandit interdum neque, non interdum mauris congue vel.</p> </div>
For more detailed information about the overflow property, refer to this MDN documentation.
Written by: Steven Iversen 07-06-2023 Written in: CSS tutorials
6 Comments
Leave a Reply
You must be logged in to post a comment.
I really lovd this aritcle on overflow . It explaind the concept vry clearly and gave good examples for how to use it in CSS. I’m a nmewbie to web design and this wsa vry helfpul in undrstanding how to handl overflow in my layouts. Thank you for sharing!
Nice article! It’s really helpful to understand overlow and how to use it in CSS . I had trouble controlling the elements on my website, but now I know how to handle it better. Thank you for sharing these great tips!
This was so helpful! I’ve always struggled with understanding how to use the CSS overflow property properly, but this explanation really clarified things for me . Thank you!
I always had trouble understanding CSS overflow, but this article made it so clear! Now I feel much more confident using it in my projects . Thanks for the great explanation!
I never knew about the ‘overflow’ property before, this article really helped me understand how to use it in my coding projects! 🙌
I found this article to be lacking in depth and clarity on the topic of overflow . It would have been helpful to see more examples and practical applications of how to use overflow in different scenarios. Overall, I was left wanting more detailed information to truly grasp the concept.