How to use css overflow: hidden (overflow hiding and clearing floats)
|
Overflow Hide It means hiding text or image information that exceeds the specified height.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {background-color: yellow;width: 350px;height: 100px;overflow: hidden;}
</style>
</head>
<body>
If the content in the <p> element exceeds the given width and height attributes, the overflow attribute<br> can determine how it is displayed and whether a scroll bar is displayed. </p>
<div> This attribute defines what happens to content that overflows the content area of an element. <br>If the value is hidden, the part outside the range is hidden. <br>If the value is scroll, a scroll bar is displayed. <br>If the value is visible, the excess portion will be rendered outside the element box. <br>If the value is auto, it is automatic; if the text exceeds the element box, the scroll bar will be displayed; if it does not exceed, the scroll bar will not be displayed. <br>If the value is inherit, the value of the overflow attribute of the parent element is inherited. </div>
</body>
</html>The following figures are respectively intercepted when the value is hidden and the value is auto
Another one is to display text information in a single line, and the excess part is displayed with ellipsis (emphasize: it must be displayed in one line of text to be effective!)
div {
background-color: yellow;
width: 350px;
margin: 100px auto;
white-space: nowrap;/*emphasized text is displayed in one line*/
overflow: hidden;/*Overflow content is hidden*/
text-overflow: ellipsis;/*Overflow text displays ellipsis*/
}
Clear float <br /> This left-right layout is often used in layout: a parent box, which contains two child boxes, left and right. However, the number and size of the child's contents are uncertain, so the parent box cannot have a fixed height. The parent box's height needs to change according to the child box's height. Let’s find out below! Below is the parent box given a height of 200px, and the two child boxes float left and right, so there is no problem with the display.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {margin: 0;padding: 0}
.header {background-color: #333;color: #fff;text-align: center;height: 80px;line-height: 80px;}
.father_box {width: 500px;height: 200px;margin: 0 auto;background-color: yellow;}
.child_left {width: 100px;height: 100px;background-color: blue;float: left;}
.child_right {width: 200px;height: 150px;background-color: blue;float: right;}
.footer {background-color: #333;color: #fff;text-align: center;height: 80px;line-height: 80px;}
</style>
</head>
<body>
<div class="header">header here</div>
<div class="father_box">
<div class="child_left">child_left</div>
<div class="child_right">child_right</div>
</div>
<div class="footer">footer is here</div>
</body>
</html>
When the content of the box on the right increases, the parent box should also increase in height. At this time, we usually delete the height of the parent box to make the parent box adaptive to the height, but the result is like this. The two child boxes cover the footer. This is because: the two children are out of the standard flow due to floating, but the parent box has no height, so the parent box thinks it has no content, so the height will not be stretched by the content, which is equivalent to the parent's height being 0px; then the footer box at the same level will be arranged according to the standard flow, and will be arranged next to the yellow parent box at the same level, resulting in a disordered layout of the page (also called page collapse).
At this time, we add an overflow:hiffen to the parent box; then the page becomes like this, and the height of the parent box increases as the child box increases.
If overflow:hidden; does not achieve this effect in an earlier version of IE, then add zoom:1; That is: overflow:hidden;zoom:1; This principle is actually a concept called BFC (Block formatting context), which means "block formatting context". BFC defines an independent rendering area and stipulates the rendering rules of the block-level elements inside it. Its rendering effect is not affected by the external environment.
Friends who are interested in BFC can learn more about it! Solve the problem of blank space at the bottom of the image after inserting it <br /> After inserting the image, since the box has no given height, it will be stretched by the height of the image and leave a gap of several pixels (red part).
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
* {margin: 0;padding: 0;list-style: none;}
.box {width: 200px;background-color: red;margin: 0 auto;}
</style>
</head>
<body>
<div class="box">
<img src="img02.jpg" width="200" height="200" alt="">
</div>
</body>
</html>
There are two solutions: 1. Add a height to the parent box, the same height as the image, and add overflow:hidden; (adding these two together will make the compatibility better!)
2. There is no need to add height to the box, let it adapt to the image height, and add display:block to img;
The above is my understanding of overflow:hidden based on the sharing of the big guys on the Internet and online articles. I hope it can help more people. |
>>: Detailed explanation of Vue router routing
Recommend
Install docker offline by downloading rpm and related dependencies using yum
You can use yum to install all dependencies toget...
HTML tag full name and function introduction
Alphabetical DTD: Indicates in which XHTML 1.0 DT...
Detailed explanation of Tomcat's commonly used filters
Table of contents 1. Cross-domain filter CorsFilt...
5 ways to make your JavaScript codebase cleaner
Table of contents 1. Use default parameters inste...
Detailed explanation of performance optimization ideas for React functional components
Optimization ideas There are two main optimizatio...
JS implements the sample code of decimal conversion to hexadecimal
Preface When we write code, we occasionally encou...
How to handle concurrent updates of MySQL data
Will UPDATE lock? Will the SQL statement be locke...
Install and configure MySQL 5.7 under CentOS 7
This article tests the environment: CentOS 7 64-b...
Detailed explanation of CSS float property
1. What is floating? Floating, as the name sugges...
Selection and thinking of MySQL data backup method
Table of contents 1. rsync, cp copy files 2. sele...
Vue realizes screen adaptation of large screen pages
This article shares the specific code of Vue to a...
Installation and deployment tutorial of the latest MySQL version 5.7.17 (64bit ZIP green version) under Win 8 or above
First of all, the blogger is playing the communit...
HTML tutorial: How to modify image size, alignment, spacing and border attributes
Image tag : <img> To insert an image into a ...
Regarding the problem of using webpack instructions in vscode showing "Because running scripts is prohibited in this system" (perfect solution)
When learning Vue, when I always use webpack inst...
Detailed process of installing the docker plugin in IntelliJ IDEA (2018 version)
Table of contents 1. Development Environment 2. I...