How to use overflow of CSS

This article is about how to use CSS's overflow. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. Overflow grammatical value

Overflow: visible | auto | hidden | scroll

Of course, overflow can separately set the scroll bar style in the X (overflow-x) and Y (overflow-y) directions with the same value as the application and overflow syntax usage structure.

II. Interpretation of Overflow parameter values

Visible: do not cut the content or add scroll bars. If you explicitly declare this default value, the object will be cut to the size of the window or frame that contains the object. And the clip property setting will be invalidated

Auto: this is the default value for body objects and textarea. Cut content and add scroll bars as needed, which is also the default value for DIV, but you can set it when you need to set it.

Hidden: does not display content that exceeds the object size

Scroll: always show scroll bar

3. Special explanation of Overflow

Retrieves or sets how to manage content when the content of an object exceeds its specified height and width.

Setting the textarea object to the hidden value hides its scroll bar.

For table, if the table-layout property is set to fixed, the td object supports the overflow property with a default value of hidden. If set to hidden,scroll or auto, content beyond the size of the td will be cut. If set to visible, it will cause additional text to overflow to cells on the right or left (depending on the direction property setting). This property is available on MAC platforms as of IE5.

Focus on learning Overflow

Overflow:visible this style allows the scroll bar to be hidden, but the mouse can be pulled and slid up and down.

Overflow:hidden hides the content of the object beyond the set width and height

Overflow:scroll this style causes the content to display a scroll bar regardless of whether it exceeds the height width or not.

V. Overflow:hidden and Overflow:scroll practice

We use the same width and height setting, one hides the content beyond the width height, one to display the scroll bar, and for the case demonstration, we add a CSS border border to the case 2 objects.

CSS Code:

. divcss5-hidden,.divcss5-scroll {width:300px; height:100px;line-height:25px; border:1px solid # 333}. Divcss5-hidden {overflow:hidden; height:50px}. Divcss5-scroll {overflow:scroll; margin-top:10px}

Html Code:

Hide the excess content without showing scrolling. Divcss5's overflow:hidden test demonstration case sets the high and wide rear objects, and the content does not exceed the objects.

Thank you for reading! This is the end of the article on "how to use the overflow of CSS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!