Overflow Handling in CSS

CodeVigyaan is a free education platform offering programming tutorials, study materials, notes, and real project ideas for college student.

The over flow in CSS is where any content that is larger than the once-defined container is displayed over theothers. In this case, it can often be positive or negative to not only hang this content out of the box, but to hurl it into other elements. To cope, you use the overflow property (and the subsidiary overflow-x and overflow-y).

1. The Core Values

There are 4 major keywords you use to tell the browser how to respond to “spilling over” content. ValueDescription

visible: Default. The content is not slipped but appears along outside the element‘s box.

Hidden: The content is clipped at the edge of the padding box. The browser does not show scrollbars.

scroll: Content is taxed up to the padding border, but the browser is forced to provide scrollbars (regardless if the content irritates fit).

auto: Content is taxed up to the padding border, but the browser offers scrollbars personified if the content extends.

2. Directional Control:

overflow-x and overflow-yAt times, you‘d rather provided a data tape recorder scrollbar in a single arrow.

overflow-x: Taxes the left-and right edges.

overflow-y: Aids the top-and bottom edges.

Note: If you punish one axis to idle or scroll, and the bordering to visible, the browser consequently frequently change the obvious axis to auto-what come to a total of difficult for the system to present “visible” information in a direction while trimming it in order.

3. The clip Reason overflow:

clipA recent birth is overflow: clip. It is very comparable to hidden, but with two explicit differences: It denies all scrollbars, including programmatic (use JavaScript scrollTo() and the kind). It can be applied with overflow-clip-margin, which appreciates the cord to spill out just a crease past to the border before being pruned.

4. Text Overflow Tricks

If you often want to manage spilling out text (as with ”…”, tacked onto the end of a line of text), you exploit a conjunction:

CSS

.truncate {

Width: 200px;

White-space: nowrap; /* Make the text not to break lines */

Overflow: hidden; /* Hides the spillover */

Text-overflow: ellipsis; /* Add the ”…”*/

}

5. Block Formatting Context (BFC)

One great “hidden” superpower of over flow is that if anything else but visible is set, it creates a Block Formatting Context. This makes your life easier in two common CSS trouble spots. Margin Collapsing: No more margin leaks of child elements out of the parent. Float Clearing: No need for those clever “clearfix“s anymore, parent containers just automatically grow to include floats within.

6. Common Mistakes

Touch devices: screens hides scrollbars until you start sweeping. Use over-flow: auto for a fluid experience.

The “hidden” problem: overflow: hidden cuts the “real” window out from underneath shadows and tooltips that should poke out of the container.

Dependency: Container must have a height (or max-height) or white-space: nowrap for horizontal overflow, otherwise, the container will grow infinitely along with its content.