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
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!