09. Handling Element Overflow
The overflow property
You can tell CSS how to handle elements that are too large to be contained within its parent container.
We use the propertyoverflow, and the values can be set to hidden, visible, scroll, auto.
#sample {
width: 18em;
height: 7em;
margin: 0 auto 5px;
border: 2px black solid;
border-radius: 5px;
padding: 0.5em;
overflow: scroll; /* how container will handle overflow */
}Scroll
This overflow is set to scroll, with the overflow text clipped.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper ac magna eu sodales. Aliquam nec nibh ut odio interdum egestas quis eget mauris. Donec egestas libero quis velit facilisis sodales. Nullam quis magna vestibulum, accumsan nulla vitae, lobortis diam.
Visible
This overflow is set to visible, meaning the text just goes out of its containing box like it runs the place.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper ac magna eu sodales. Aliquam nec nibh ut odio interdum egestas quis eget mauris. Donec egestas libero quis velit facilisis sodales.
Hidden
This overflow is set to hidden. Notice that the text just cuts off.
Auto
This overflow is set to auto, which causes overflowing content to be clipped with a scroll-bar added.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper ac magna eu sodales. Aliquam nec nibh ut odio interdum egestas quis eget mauris. Donec egestas libero quis velit facilisis sodales. Nullam quis magna vestibulum, accumsan nulla vitae, lobortis diam.
Specifying a dimension for overflow
If you'd like to handle just the horizontal or vertical overflow, we can use theoverflow-x andoverflow-y properties.
p {
overflow-x: hidden;
}Build modern and responsive webpages
High Performance Web Sites
Want your web site to display more quickly? This book presents 14 specific rules that will cut 25% to 50% off response time when users request a page. Author Steve Souders, in his job as Chief Performance Yahoo!, collected these best practices while optimizing some of the most-visited pages on the Web.
$ Check price
(63+ reviews) Aching back from coding all day?
Self-Massage Tool
Relieve spasms, tight muscles, trigger points and pressure points with the Body Back Buddy! This trigger point massage is designed to help you self-message any area of your body - especially those that are hard to reach. Keeping your muscles relaxes and out of contraction is importan in helping to reduce pain and prevent muscle injury.
$ Check price(3,443+ reviews) Ad