Quick Take
The overflow attribute in CSS can be used in a number of different ways to add effects to your web pages and fit more content onto one page to increase the chance of your visitors reaching it. This article describes the CSS overflow attribute and includes some examples.
The CSS Overflow Attribute
If a CSS element has a fixed width and height, then the overflow attribute controls what happens when the content inside the box exceeds the dimensions of the CSS element.
If the following element:
contains the following image:
then the entire image is displayed by default. The default state is equivalent to using the CSS overflow attribute with its default visible attribute:
On the other hand, if the CSS overflow attribute is set to hidden, then the image is curtailed to the dimensions of the
element.
If the CSS overflow attribute is set to scroll, then the image is curtailed to the dimensions of the
element, but a scroll-bar is added to allow scrolling to reveal the rest of the content. The scroll bar will appear whether the content is too large or not.
One of the most useful values for the CSS overflow attribute is auto. In this case, the image is curtailed to the dimensions of the
element, but a scroll-bar is added to allow scrolling to reveal the rest of the content, but only in those cases where the content exceeds the dimensions. Further, it will appear only for one dimension if only one dimension exceeds the dimension of the containing element.
Finally, the value can be set to inherit, but this value is not supported by any version of Internet Explorer, so will not be considered further here.
Applications of the CSS Overflow Attribute
The Scrolling Gallery
In a recent article I showed how you could use the CSS overflow attribute to construct a scrolling gallery wall to display pictures
. For more details, or to see it in action, visit https://www.gallery299.co.uk
for an example of a working application of this type.
Replacing the Read more message on your blog
Many content management systems or blogging sites lead to a series of items with a Read more link at the bottom of the item. The reader has to click on the link and is taken to a new page to read the full article. An alternative strategy is to set the CSS for the item to overflow auto, this allows the content to be accessed by scrolling down, and crucially does not take the reader away from the main page, which may encourage the reader to stay on your site and access more content.
Accommodating dynamic content
One of the ways of getting dynamic content to an otherwise static site is to use a script to turn RSS syndicated content into html. See https://www.RSS2html.com/
for an example script or search RSS 2 html in your favourite search engine to find others. One of the challenges is that the length of an article retrieved by such a script can be highly variable. In order to accommodate the generated text within a fixed HTML layout, use of the overflow:auto attribute is almost essential.
Keep Exploring
More from Tech
Still writing your password on sticky notes? Do you use the same password for multiple sites? Why not use a password …
Do you have a limited data cap for your internet connection or are tired of seeing endless ads on your computer? …
Adblock Plus is obviously having an impact on Facebook’s revenues as Facebook recently changed the way they code ads on …