CSS overflow property usage

 The CSS overflow property is used to define how the element should be rendered when it exceeds a certain range. For example, the image exceeds the size of the preset area, the text length exceeds the original range, etc. At this time, you can use the CSS overflow property to determine whether the block displays scrollbar or not. (Scroll) or whether to hide the element.

Common values ​​of CSS overflow

• overflow: auto; //The scroll will be used automatically by default
• overflow:visible; //The displayed text or picture will directly exceed the scope, without scrolling.
• overflow:hidden; //Automatically hide the excess text or picture.
• overflow:scroll; //A scroll is automatically generated.
• overflow:inherit; //Inherited from the visibility of the parent element

For example,




Figure 1 uses the overflow: auto feature. When the text length exceeds the block, a horizontal scrollbar (scroll) is automatically generated. Figure 2 uses overflow:visible. You can see that the text has exceeded the purple area. Block, but the scrollbar is not displayed at all. In Figure 3, overflow:hidden is used, so although the text area is out of range, the scroll bar is not displayed, and the text is not displayed completely, because the excess part has been hidden, and finally seen Figure 4 uses overflow:scroll to automatically generate scrolls. The difference from Figure 1 is that there are more vertical scrolls, but the vertical direction does not require scrolls.

Other techniques
Sometimes the webpage will appear the scrollbar in the x direction without warning. This situation usually occurs when the results of different browsers are presented, but the difference of the browsers is not the focus of our discussion. Here is a little trick. You can force the x-axis scrollbar to hide, please see the following syntax.

• overflow-x:hidden;
• overflow-y:auto;

Through the above grammatical settings, the x-axis scroll is hidden, and the y-axis scroll is automatically extended, so that's it!