CSS3 overflow property explained

1. Overflow

Overflow is overflow (container). When the content exceeds the container, just add the overflow attribute value to hidden to hide the part that exceeds the container.

If the content exceeds the container but you don't want it to be hidden, you can set its property value to auto;

overflow: auto attribute If the value exceeds the limit, a scroll bar will appear; if the value does not exceed the limit, no scroll bar will appear.

The scroll bar can also be set individually, for example overflow-x: hidden; overflow-y: auto; so that only the vertical scroll bar is visible. If you define the x-axis or y-axis separately, you need to set the attribute values ​​for both attributes.

Original effect:

Add overflow: hidden; attribute, effect:

As you can see, overflow:hidden will hide the part that exceeds the box, which can also be understood as cutting off.

2. Add overflow-x: hidden; overflow-y: auto properties

The properties are set to overflow-x: auto; overflow-y: hidden; the effect is exactly the opposite of the above picture, that is, the side of the scroll bar is hidden and appears at the bottom.

2. Common attribute values ​​of overflow

There are four common overflow attributes: visible, hidden, auto and scroll;

Visible is the default value of overflow, which means it exceeds the display.

Hidden means beyond hidden;

auto is automatic, that is, a scroll bar will appear if the value exceeds the limit, and no scroll bar will appear if the value does not exceed the limit.

The content will be trimmed if scroll is set, but the browser will display a scroll bar to view the remaining content.

3. Magical usage of overflow

The first usage: Solve the margin-top transmission problem

Margin-top transmission problem: The margin-top of the child element will bring down the parent element together. This can be solved by adding overflow:hidden to the parent element

The second usage: Clear the impact of floating --- collapse the height of the parent element

Universal cleaning method

overflow:hidden

clear:both

The third usage: reveal animation --- beyond hiding

Fourth usage: single-line text exceeds ellipsis

.sl{

    white-space:nowrap;/*no line break*/

    overflow:hidden;/*Exceeding hidden*/
    
    text-overflow:ellipsis;/*exceeds ellipsis*/

    width:;

}

Note that you need to set the width

The above is a detailed explanation of the CSS3: overflow property. For more information about the CSS3 overflow property, please pay attention to other related articles on 123WORDPRESS.COM!