How CSS hides excess content_html/css_WEB-ITnose-HTML Tutorial-php.cn

How CSS hides excess content_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:40:31

Original

1158 people have browsed it

How to hide excess content in CSS:

Sometimes the content in the container will exceed the boundaries of the container and look very ugly, so you need to The excess part is hidden. Here is a brief introduction to the method to achieve this effect.

The code example is as follows:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.parent {    width: 200px;    height: 200px;    border: 1px solid red;}.children {    width: 240px;    height: 250px;    border: 1px solid blue;}</style></head><body><div class="parent">  <div class="children"></div></div></body></html>

Copy after login

The content in the above code exceeds the boundary, then we can set the overflow attribute value of the container to hidden.

The above setting is to hide all excess content. We can also set up the hiding of horizontal or vertical excess content. The code example is as follows:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.parent {    width: 200px;    height: 200px;    border: 1px solid red;    overflow: hidden}.children {    width: 240px;    height: 250px;    border: 1px solid blue;}</style></head><body><div class="parent">  <div class="children"></div></div></body></html>

Copy after login

In the above code, the child div exceeds the boundary whether vertically or horizontally. If we only want to hide the content that extends horizontally, we can use the following code:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.parent {    width: 200px;    height: 200px;    border: 1px solid red;    overflow-x: hidden}.children {    width: 240px;    height: 250px;    border: 1px solid blue;}</style></head><body><div class="parent">  <div class="children"></div></div></body></html>

Copy after login

The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0507/ 905.html

The most original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=4648