How to hide content that overflows the DIV border

When we usually layout, sometimes the content exceeds the width and height of our DIV border, which will cause the web page to be misaligned and messy, which is particularly unsightly and the user experience is extremely poor. How do we hide the overflowing DIV border? What about the content? Today I bring you this tutorial.

CSS style to implement automatic hiding of content that overflows beyond the width and height of the DIV border

Usually when we layout, some text content will exceed the height of the overflow limit, and some Picture will burst the DIV and cause misalignment of the web page.

So we need to solve how to use CSS to automatically hide content that exceeds the set CSS width and CSS height without breaking the DIV layout.

Especially in IE6, if the content exceeds the height and width of the object, it will be burst and increased in height. At this time, we can use the following solutions.

1. Solve the CSS style

At this time we can use CSS overflow style solution:

Corresponding style overflow:hidden

Div{overflow:hidden}

After this setting, if the DIV object is set to a certain width and height, adding overflow:hidden at this time will hide the content including images that exceeds the width and height of the DIV.

Related reading: css implements overflow and displays ellipses for text content that exceeds it

2. Case of hiding excess content

1. Hide text content that exceeds object width and height

If we align the object beautifully in a layout, sometimes we need to set the height and width of the object and then fix it. At this time, we need to ensure that no matter how much content and text there is, the layout will not exceed the set width and height. At this time, we need overflow:hidden to help.

CSS code:

<style> 
.pcss5{ width:300px; height:50px; line-height:25px; overflow:hidden} 
/* 设置对象高度宽度，同时设置overflow:hidden */ 
</style> 
Html代码：

<p class="pcss5">欢迎，
</p>

Setting overflow:hidden in this way will hide the content that cannot fit outside the set width and height of the object no matter how much content is there.

2. Case of hiding the part of the image that exceeds the width of the object

Here, set an object box with a certain CSS width and CSS height, put a large image, and then use overflow:hidden to hide the excess part. .

Css code

<style> 
.pcss5{ width:300px; height:50px; line-height:25px; overflow:hidden} 
/* 设置对象高度宽度，同时设置overflow:hidden */ 
</style>

Html code

<p class="pcss5"> 
<img  src="/static/imghwm/default1.png"  data-src="http://www.php.cn"  class="lazy"   / alt="How to hide content that overflows the DIV border" > 
</p>

Set the width and height, although the picture is large

To summarize, If you want the content to not exceed the width and height limits set by the object, you only need to use overflow:hidden to hide the excess parts.

Related reading:

How to set the scroll bar for DIV

How to use CSS to center the DIV

Introduction to how to set DIV scroll bar properties and styles

The above is the detailed content of How to hide content that overflows the DIV border. For more information, please follow other related articles on the PHP Chinese website!