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
Detailed explanation of the function and usage of DOCTYPE declaration
1. Browser rendering mode and doctype Some web pa...
Implementation steps for setting up the React+Ant Design development environment
Basics 1. Use scaffolding to create a project and...
Analysis of the usage of replace and regexp for regular expression replacement in MySQL
This article uses examples to illustrate the use ...
JavaScript design pattern chain of responsibility pattern
Table of contents Overview Code Implementation Pa...
How to configure MySQL8 in Nacos
1. Create the MySQL database nacos_config 2. Sele...
Tips for optimizing MySQL SQL statements
When faced with a SQL statement that is not optim...
Detailed steps for installing and configuring mysql 5.6.21
1. Overview MySQL version: 5.6.21 Download addres...
How to use JSX to implement Carousel components (front-end componentization)
Before we use JSX to build a component system, le...
How to use display:olck/none to create a menu bar
The effect of completing a menu bar through displ...
Spring Boot 2.4 new features one-click build Docker image process detailed explanation
background In order to support Docker containeriz...
HTTP and HTTP Collaboration Web Server Access Flow Diagram
A web server can build multiple web sites with in...
Summary of the dockerfile-maven-plugin usage guide
Table of contents pom configuration Setting.xml c...
Pure CSS custom multi-line ellipsis problem (from principle to implementation)
How to display text overflow? What are your needs...
MySQL sorting principles and case analysis
Preface Sorting is a basic function in databases,...
CentOS7 configuration Alibaba Cloud yum source method code
Open the centos yum folder Enter the command cd /...