Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "how to use overflow attributes in CSS", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use overflow attributes in CSS" article.

Introduction of overflow attribute in CSS

The overflow attribute specifies how to handle content that does not conform to the element box.

◆ is used as follows:

Object.style.overflow=visible | hidden | scroll | auto.

◆ parameter description:

Visible: the content will not be trimmed and will be rendered outside the element box.

Hidden: the content will be trimmed, but the browser will not display a scroll bar for viewing the content.

Scroll: the content is trimmed, but the browser displays a scroll bar to see the rest of the content.

Auto: it is up to the browser to decide how to display it. If necessary, a scroll bar is displayed.

◆ this example uses overflow to display the contents of the overflow element box:

Viewsourceprint?

01 02 03 04div {border:thinsolidgreen;width:100px;height:100px;} 05 06 07functionhideOverflow () 08 {09document.getElementById ("div1") .style.style = "hidden"; 10} 11 12 13 14 15 16Thisissometext.Thisissometext.Thisissometext. 17Thisissometext.Thisissometext.Thisissometext. 18Thisissometext.Thisissometext.Thisissometext. 19 20 21 23 24 25

I'm sure you've all come across a situation where no height is specified for the parent div. It is hoped that he will automatically adapt through the height change of the child div. It seems very simple, but there are often more requirements for child div in daily applications, such as multiple child div, child div left (right) floating and so on. At this time, you will encounter a more depressing situation: the parent div cannot increase with the height of the child div, and the phenomenon of "delamination" occurs. The attribute "overflow:hidden;" needs to be used at such times. On the face of it, its role is to hide the div layer, but when we apply this attribute to the parent div, we will find that it becomes miraculously adaptive.

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).

The excess part of overflow:hidden--- will be automatically hidden, but the bad thing to do is that the information in this part is incomplete. For example, the picture shows only part of it, but the layout of the page will not be messy. It is important to note that when using overflow, be sure to define width, either as a percentage or as a specific value. (you can also use this when arranging a list of pictures with ul and li to avoid some large images messing up the layout and to solve the problem of automatic backline arrangement of li elements when the browser window zooms out.) With overflow:auto, you can also mimic the effect of IFRAME on the page.

The above is about the content of this article on "how to use overflow attributes in CSS". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.