Overflow attribute in CSS and CSSoverflow attribute

Overflow attribute in CSS and CSSoverflow attribute

• Overflow attributes

If the content in the element exceeds the specified width and height, the overflow attribute can determine whether to display the scroll bar, whether to hide the overflow part, and other behaviors, specifying what happens when the content overflows the element box.

• Possible values include:

Visible: Default value. The content will not be trimmed and will be displayed outside the element box.

 

Hidden: The content is trimmed, and the rest of the content is invisible.

 

Scroll: The content is trimmed, but the browser displays a scroll bar to view other content.

 

Auto: The content is trimmed, but the browser displays a scroll bar to view other content.

 

Inherit: Specifies that the overflow attribute value should be inherited from the parent element.

 

• Overflow-x and overflow-y

Overflow-x is mainly used to define the cut for horizontal content overflow, while overflow-y is mainly used to define the cut for vertical content overflow, if the overflow-x and overflow-y values are the same, they are equivalent to overflow. If the value of overflow-x is different from that of overflow-y, and one of the values is explicitly set to visible or the default value is visvisible, the other value is non-visvisible. Then, the visvisible value is reset to auto.

Let's take a look at the following small example. div2 exceeded the container div1 in the horizontal direction. We set overflow-x of div1 to visible and overflow-y to scroll, however, the horizontal scroll bar is displayed instead of showing the excess parts. The overflow-x is reset to auto. Similarly, the text in div2 goes beyond the container in the vertical direction. We set overflow-y of div2 to visible and overflow-x to hidden, but we find that the redundant parts are not hidden in the vertical direction, the scroll bar appears in the vertical direction, and overflow-y is reset to auto.

 

If the child element is an absolute positioning element and the parent element is not located, setting overflow for the parent element does not work. Just like, div2 is an absolute positioning element. After overflow: hidden is set for div1, the part that exceeds div1 is not dropped. You only need to set the position: absolute, fixed, or relative for the parent element.