Home > Article > Web Front-end > How CSS hides excess content_html/css_WEB-ITnose
How CSS hides excess content_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:40:311166browse
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> 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> 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> 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