Display and Hide, Overflow
Knowledge Point 1.visibility Display and Hide
Sets or retrieves whether to display an object. Unlike the display attribute, this attribute preserves the physical space occupied by the hidden object. This means that elements still occupy their original space, but they can be completely invisible.
The difference between visibility:hidden and display:none
visibility:hidden sets invisible elements that also take up space on the page.
display:none sets the element invisible and does not occupy page space.
visible Default value. Elements are visible. hidden Elements are invisible. collapse When used in table elements, this value can delete a row or column, but it does not affect the layout of the table. The space occupied by rows or columns is reserved for other content. If this value is used on other elements, it appears as "hidden". inherit
Knowledge Point 2.Display Displays Hidden and Inline Blocks
inline type
Converted to an in-line element, the in-line element can be on the same line, no width, only line height
block type
Convert to block-level elements, one block occupies a row, and you can set width and height
inline-block type
In-line block elements have the characteristics of in-line elements as well as block-level elements. You want child elements to extend the width of parent elements using inline-block
none
Hide, don't show, don't take up space
Compatibility issues
But this attribute is not supported by all browsers at present. IE6 and IE7 do not support this attribute, which can achieve this effect. The method of implementing display:inline-block effect under IE is to trigger block elements with display:inline-block attribute, and then define display:inline.
Knowledge Point 3.overflow Overflow Display Hiding
overflow attribute
visible:-visible: If you don't handle the overflow, the content may go beyond the container. (Default) hidden: - Hide the contents of the overflow container without scrolling bars. Scroll: - Scroll to hide the contents of the overflow container, which will be presented by scrolling the scroll bar. (Content overflow or not will be displayed) auto: scroll bars appear on demand, no scroll bars appear when the content does not overflow the container, scroll bars appear when the content overflows the container, and scroll bars appear on demand.
overflow-x and overflow-y
The display mode can be set separately in the horizontal direction or the vertical direction if the content exceeds the box's accommodation range.
visible: If overflow content is not handled, it may exceed the container. hidden: Hide the contents of the overflow container without scrolling bars. Scroll: Hide the contents of the overflow container, which will be rendered by scrolling the scroll bar. auto: When the content does not overflow the container, there will be no scroll bar. When the content overflows the container, there will be scroll bar and scroll bar on demand.
Often, we can see the effect of ellipsis when a paragraph of text is too long in the web page. There are two types of ellipsis shown in the picture. One is that multiple lines appear ellipsis on the last line; this effect can be achieved by code.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Overflow ellipsis</title>
<style>
div{
border:1px solid #0f0;
width:200px;/*Set width*/
/*The following three attributes are the general law of coercive invariance*/
white-space:nowrap;/*Force no line change*/
overflow:hidden;/*Hide if overflow occurs*/
text-overflow:ellipsis;/*The way to hide text overflow is to use ellipsis marks*/
}
</style>
</head>
<body>
<div>
//Today, my mood is also very good, because my college entrance examination results come out, and the exam is particularly high;
</div>
</body>
</html>
English and numbers are not forced to change lines; the body tag has the default overflow property; English without spaces or numbers are not changed lines; letters with spaces become words that can change lines.
<style>
div{
border:1px solid #0f0;
width:200px;/*Set width*/
height:200px;
overflow:auto;
word-wrap:break-word;
}
</style>
</head>
<body>
<div>
avaeshvoehnvoehovgehvoehvgehroigehohroewhgovewhnvgoehouvgheovgehgoehgoeheo
//Today, my mood is also very good, because my college entrance examination results come out, and today's mood is also very good, because my college entrance examination results come out, and the special college entrance examination today's mood is very good, because my college entrance examination results come out, and the special college entrance examination of my heart today. The situation is also very good, because my college entrance examination results come out, and the exam is very high today, my mood is very good, because my college entrance examination results come out, and the exam is very high.
</div>
white-space:nowrap; text forcing no line breaks Normal letters and numbers do not wrap without spaces, but Chinese automatically wraps lines in text units so that text does not overflow within a line. text-overflow:ellipsis; the effect of ellipsis when text overflows Expanding how to automatically line-wrap letters and numbers without spaces word-wrap:break-word; automatic line wrapping attributes (word wrapping)
Knowledge Point 4.text-overflow Text Overflow
clip. clip text. Ellipsis displays ellipsis symbols to represent pruned text. String uses a given string to represent pruned text.
What happens when text overflows containing elements.
<!DOCTYPE html>
<html>
<head>
<style>
div.test
{
white-space:nowrap;
width:12em;
overflow:hidden;
border:1px solid #000000;
}
div.test:hover
{
text-overflow:inherit;
overflow:visible;
}
</style>
</head>
<body>
<p>If you move the cursor to the following two div On top of that, you can see all the text.</p>
<p>this div Use "text-overflow:ellipsis" : </p>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<p>this div Use "text-overflow:clip": </p>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
</body>
</html>