How to hide the contents of an overflow div

Usually we in the layout of the page always have a lot of text content, more than overflow our limit of height, then there will be some pictures will burst Div, so that the page dislocation of the problem, then how can we solve it?

This we need to solve how to use CSS to go beyond setting css width and css height of the content is automatically hidden, and not bursting div layout.

Especially in IE6, if the content exceeds the object height and width of the load, it will be increased by bursting, this time we can use the following workaround.

Resolve CSS Styles

At this point we can use CSS overflow style to solve:

corresponding style Overflow:hidden

Div{overflow:hidden}

When this is set, if the Div object is set to a certain width height, adding Overflow:hidden will hide content that exceeds the height of the div width including the picture.

Related reading: CSS implementation overflow out of text content display ellipsis

Hide out of content cases

1. Hide the width of the object beyond the height of text content

If we are in a layout in order to beautiful alignment, sometimes we need to set the object aspect after the fixed, this time need to implement no matter how much text does not exceed the set width height layout, this time we need overflow:hidden help.

CSS code:

<style>. div{width:300px; height:50px; line-height:25px; Overflow:hidden}/* Set object height width, set Overflow:hidden */ </style>

HTML code:

<div class= "div" > Welcome,

Here you can learn CSS at the same time can also download the required resources,

Find answers to your FAQs </div>

Resolving Bursting content methods

This sets the Overflow:hidden no matter how much content hides the object settings beyond the width and height of the content that does not fit.

Here set a certain CSS width and CSS height of the object box, put a large picture, and then use Overflow:hidden hide its out of the section.

CSS Code

<style>. div{width:300px; height:50px; line-height:25px; Overflow:hidden}/* Set object height width, set Overflow:hidden */ </style>

HTML code

<div class= "div" >  </div>

So, if you want the content not to exceed the object set width height limit, then use Overflow:hidden hidden beyond the redundant parts.

Overflow hidden tips on so many, more exciting please pay attention to the PHP Chinese network other related articles!

Related reading:

How to use div in HTML

HTML5 <nav> tags how to use

HTML document type declaration how to write