Display and hide of elements
The attributes related to the display or hiding of the element mainly include display, visibility and overflow (display and hide the overflow part of the element).
- The display attribute is used to establish the type of display box generated by the element during layout. For document types such as HTML, you need to use the display attribute with caution. Because it may violate the display hierarchy already defined in HTML. Here is mainly about another function of this attribute, which can be used to set the display and hiding of elements. display: none; hide the element, display: block; display the element. After using the display property to hide the element, the element no longer occupies the original space .
- The visibility attribute is used to specify whether to display the element box generated by an element. visibility: visible; The default value, the element is visible. visibility: hidden; The element is invisible. After the element is hidden using the visibility property, the element still occupies space on the page . This attribute can be used to set the style of the mask layer.
- The overflow property specifies what happens when the content overflows the element box . The following is a description of setting different attribute values.
| value | description |
|---|---|
| visible | Defaults. The content will not be trimmed and will appear outside the element box. |
| hidden | The content will be trimmed, and the rest of the content will be invisible. |
| scroll | The content will be trimmed but the browser will display a scroll bar to view the rest of the content. |
| auto | If the content is trimmed, the browser will display a scroll bar to view the rest of the content. |
| inherit | Specifies that the value of the overflow attribute should be inherited from the parent element. |
The scroll value will add horizontal and vertical scroll bars regardless of whether the content of the element overflows. And auto adds the corresponding scroll bar when overflow occurs in this direction .
Single-line text overflow ellipsis display style settings
1. First force the text to be displayed in a line: white-space: nowrap;
2. Hide overflow: hidden;
3. Use ellipsis instead of text-overflow: ellipsis for the text;
<style>
div{
float: left;
width: 100px;
height: 40px;
margin: 200px 100px;
border: solid 2px;
}
div:first-child{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<body>
<div>
<span>我这里写了很多很多字，我要让它在一行内显示不下</span>
</div>
<div>
<span>我这里写了很多很多字，我要让它在一行内显示不下</span>
</div>
</body>
When the style of the first box is not set:
After forcing a line to display:
Hide and replace:
Multi-line text overflow ellipsis display style
Multi-line text overflow ellipsis display style (has a large compatibility problem, applicable to webkit browser or mobile terminal. It is not recommended to use css to complete it directly.)
- The flexible box model displays display:-webkit-box;
- Set or retrieve the arrangement of the child elements of the telescopic box object-webkit-box-orient:vertial;
- Limit the number of text lines displayed in a block-level element-webkit-line-clamp: 2;
- overflow:hidden; text-overflow:ellipsis;
div:first-child{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow: hidden;
text-overflow: ellipsis;
}
The results in chrome and firefox are as follows:
Browser private prefix
-moz-: Represents the private attribute of the firebox browser.
-ms-: Represents the private attributes of the IE browser.
-webkit-: Represents the private attributes of safari and chrome.
-o-: Represents the private attributes of the Opera browser.
The knowledge that has been summarized so far
- Html commonly used tags and attributes (including Html5)
- Selector and its weight in css
- Style summary in css
- Box model and element display mode
- CSS floating (float), height collapse problem
- Use of positioning in css
- Box shadows, font icons, sprites, rounded borders
- 2D conversion and 3D conversion
- Transition and animation in css
- vertical-align property
Follow-up
HTML5
- Drag and drop
- canvas
- SVG
- Geolocation
- Web storage
- App cache
CSS3
- Multi-column (you just need to understand it. Many photo websites like to use waterfall effect for typesetting. You can use multi-column to complete.)
- canvas canvas
- Multimedia query
- Layout summary
Dust / 2020/12/22