How to control the display and hiding of elements with css

Attribute introduction:

(Recommended tutorial: css video tutorial)

1. display attribute

## The #display attribute is used to set how an element should be displayed.

display: none; Hidden object display: block; In addition to converting to block-level elements, it also means displaying elements.

After display hides the element, it no longer occupies the original position.

2. visibility visibility

The visibility attribute is used to specify whether an element should be visible or hidden.

visibility: visible; The element is visible visibility: hidden; The element is hidden

visibilityAfter hiding the element, it continues to occupy its original position.

If the hidden element does not want its original position, use visibility: hidden

If the hidden element does not want its original position, use display: none

3. overflow

The overflow attribute specifies what happens if content overflows an element's box (exceeds its specified height and width).

Generally, we don’t want the overflow content to be displayed, because the overflow part will affect the layout. But if there are positioned boxes, please use overflow: hidden with caution, because it will hide the redundant parts.

4. Overflowing text ellipsis display

4.1 Single line text overflow display ellipsis

Single line text overflow display ellipsis must meet three conditions:

Force first Display text within one line

white-space: nowrap;
/*默认值normal，自动换行*/

Hide the excess part

overflow: hidden;

Replace the excess part with ellipses

text-overflow: ellipsis;

4.2 Multi-line text overflows and displays ellipses

Multiple The line text overflows and displays an ellipsis, which has major compatibility issues and is suitable for webkit browsers or mobile terminals. Most mobile terminals are based on the webkit kernel.

overflow: hidden;
text-overflow: ellipsis;
/*弹性伸缩盒子模型显示*/
display: -webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp: 2;
/*设置或检索伸缩盒子对象的子元素的排列方式*/
-webkit-box-orient: vertical;

Related recommendations:

CSS tutorial

The above is the detailed content of How to control the display and hiding of elements with css. For more information, please follow other related articles on the PHP Chinese website!