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

Solution to broken content

Set overflow:hidden in this way, no matter how much content there is, the object will be hidden. The width and height are set so that they cannot fit outside. Content.

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

Css code

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

Html code

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

So, if you want the content to not exceed the width and height limit set by the object, then use overflow:hidden to hide the excess part. .

There are so many overflow hidden tips, please pay attention to php Chinese website for more exciting Other related articles!

Related reading:

How to use DIV in HTML

##How to use HTML5

tag

How to write html document type declaration

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