Do you know how to use the CSS overflow attribute? Let’s introduce it to you in detail! We have accumulated some experience and would like to share it with you. Please correct each other.
CSS overflow property value :
1. visible: Default value, the content will not be trimmed and will be presented outside the element box;
2. hidden: The content will be trimmed and the remaining content will be invisible;
3. scroll: The content will be trimmed, but the browser will display scroll bars to view the remaining content;
4. auto: If the content is trimmed, the browser will display scroll bars to view the remaining content;
There are also two sister properties of overflow, overflow-y and overflow-x, which are rarely used. Let 's look at each of these values and discuss common usage and techniques.
(1) Auto
The auto value of overflow is very similar to scroll. The only thing it solves is the problem of scroll bars appearing when you don't need them.
(2)Hidden
The opposite value of the default value visible is hidden. It will hide everything outside the box. This is really useful for dealing with dynamic content that may cause some layout problems due to content overflow. However, please remember that content hidden using this method will not be visible at all (unless you look at the source code). For example, if some users set their browser's default font to be larger than you intended, you will push some text outside the box and hide it completely.
(3)Visible
If you do not set the overflow attribute, the default overflow attribute value is visible. So generally speaking, there is no reason to specifically set the overflow property to visible unless you want to override the value it is set to elsewhere. The important thing to remember here is that although the content outside the box is visible, the content does not affect the workflow of the page. Generally speaking, you at least don't need to set a fixed height for boxes whose content is text, so you won't encounter this situation.
(4)Scroll
Setting a box's overflow value to scroll will hide content rendered outside the box, but it will provide a scroll bar for scrolling inside the box so that the remaining content can be viewed. It is worth noting that using scroll will generate both horizontal and vertical scroll bars at the same time, even if the content only requires one of them.
Example: Using Visible and Hidden attribute values
<!DOCTYPEhtml><html><head><style>div{width:550px;height:100px;margin-top:20px;border:1pxsolidred;}div.hidden{overflow:hidden;}div.scroll{overflow:scroll ;}div.auto{overflow:auto;}</style></head><body><divclass=hidden>visible: Default value, overflowing content will not be processed, and the content will be displayed outside the element content area; <br>hidden: Hide the content of the overflow element content area; <br>scroll: Hide the content of the overflow element content area, and create a scroll bar on the left and below of the element. You can view all the elements in the element by sliding the scroll bar. Content;<br>auto: If content overflow occurs, a scroll bar will be created on the left side of the element. You can view all the content in the element by sliding the scroll bar;<br>inherit: Inherit the value of the overflow attribute from the parent element. </div><divclass=scroll>visible: Default value, overflowing content will not be processed, and the content will be displayed outside the element content area;<br>hidden: Hide the content of the overflowing element content area;<br>scroll: Hide the content in the content area of the overflow element, and create a scroll bar on the left side and below of the element. You can view all the content in the element by sliding the scroll bar;<br>auto: If content overflow occurs, it will be on the left side of the element. Create a scroll bar, and you can view all the content in the element by sliding the scroll bar;<br>inherit: inherit the value of the overflow attribute from the parent element. </div><divclass=auto>visible: Default value, overflowing content will not be processed, and the content will be displayed outside the element content area;<br>hidden: Hide the content of the overflowing element content area;<br>scroll: Hide the content in the content area of the overflow element, and create a scroll bar on the left side and below of the element. You can view all the content in the element by sliding the scroll bar;<br>auto: If content overflow occurs, it will be on the left side of the element. Create a scroll bar, and you can view all the content in the element by sliding the scroll bar;<br>inherit: inherit the value of the overflow attribute from the parent element. </div></body></html>Running results:
