How to hide content that overflows a DIV

Usually when we lay out the web page, there is always a problem with too much text content, which exceeds the height that exceeds our limit. Then there will be some pictures that will break the DIV and make the web page misaligned and confusing. Then How do we solve this?

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.

Solution to CSS style

At this time we can use CSS overflowStyle solution:

Corresponding style overflow:hidden

Div{ overflow:hidden}

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

Related reading: css implements overflow and exceeds the text content to display ellipses

Hide the excess content case

1. Hide the text content that exceeds the width and height of the object

If we In order to 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 realize that no matter how much content and text there is, the layout should not exceed the set width and height. At this time, we need the help of overflow:hidden.

CSS code:

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

Html code:

<div class="div">欢迎，

Here you can learn CSS and download the resources you need,

At the same time you can find yourself FAQAnswer