In-depth understanding of CSS overflow: hidden, scroll, visible

During layout, if the content exceeds the size of the box, you can use the CSS property Overflow to hide the content beyond the object. You can also display or hide the excess part of the scroll bar. Next, let’s learn about learning css overflow style.

1. Overflow syntax value

overflow: visible | auto | hidden | scroll

Of course, overflow can be set independently X (overflow-x) and The value and application of the scroll bar style in the Y (overflow-y) direction are the same as the overflow syntax usage structure.

2. Overflow parameter value explanation

visible: Do not cut the content or add scroll bars. If this default value is explicitly declared, the object will be clipped to the size of the window or frame containing the object. And the clip attribute setting will be invalid

auto: This is the default value of the body object and textarea. Cut the content and add scroll bars when needed. This is also the default value for DIV, but you can set it when you need to set it

hidden: Do not display content that exceeds the object size

scroll: Always Display scroll bar

3. Overflow special explanation

Retrieve or set how to manage the content when the content of the object exceeds its specified height and width.

Set the textarea object to the hidden value to hide its scroll bars.

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

4. Focus on learning Overflow

Overflow: visible This style can hide the scroll bar, but it can be pulled up and down with the mouse.

Overflow:hidden Hide the content of the object that exceeds the set width and height

Overflow:scroll This style will cause the scroll bar to be displayed regardless of whether the content exceeds the height or width.

5. Overflow:hidden and Overflow:scroll practice

We use the same width and height settings, one to hide the content beyond the width and height, and the other to display the scroll bar. Case demonstration, we add CSS border to the two objects in the case.

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:

<div class="divcss5-hidden"> 
隐藏超出的内容但不显示滚动,divcss5的overflow:hidden测试示范 
案例，设置了高和宽后对象，内容多不超出对象 
</div> 
<div class="divcss5-scroll"> 
<img  src="/static/imghwm/default1.png"  data-src="http://www.divcss5.com/uploads/allimg/130219/1_130219231214_1.jpg"  class="lazy"   / alt="In-depth understanding of CSS overflow: hidden, scroll, visible" > 
</div>

Summary: Overflow css style is often used to hide the display scroll bar, and can also hide objects that exceed the size, width and height. The content is very simple. It doesn't matter if you can't spell the word. You can recognize commonly used places when you see it. Basic grammatical structures and other basic grammatical structures can be quickly input with the help of DW software.

The above is the detailed content of In-depth understanding of CSS overflow: hidden, scroll, visible. For more information, please follow other related articles on the PHP Chinese website!