How to hide text in CSS

Methods to hide text: 1. Use the display attribute, the syntax "display:none;"; 2. Use the visibility attribute, the syntax "visibility: hidden;"; 3. Use the opacity attribute, the syntax "opacity:0 ;".

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

1. Use the display attribute
The display attribute is the real hidden element. When the display attribute of the element is none, the element will disappear from the vision. , and even the box model will not be generated. It will not occupy any position on the page. Not only that, even its child elements will disappear from the box model together.

.hide {
   display: none;
}

Note: Any animation effects and interactions added to it and its child elements will not work.

2, Use the visibility attribute
The visibility attribute is similar to the opacity attribute. When the value of this attribute is hidden, the element will be hidden. Occupies its own position and contributes to the layout of the web page. The only difference from opacity is that it does not respond to any user interaction. Additionally, elements will be hidden in screen reading software.

.hide {
   visibility: hidden;
}

Note: This attribute can also achieve animation effects, as long as its initial and end states are different. This ensures that transition animations between visibility state switches can be time-smooth.

3. Use the opacity attribute
The opacity attribute means to retrieve or set the opacity of the object. When its transparency is 0, it disappears visually. , but he still occupies that position and plays a role in the layout of the web page. It will also respond to user interaction. For elements with the opacity attribute added, their background and element content will also change accordingly.

.hide {
  opacity: 0;
}

Description: We can use the opacity property to achieve some great animation effects.
Note: This attribute is compatible with browsers above IE9. IE8 and earlier versions support alternative filter attributes, for example: filter:Alpha(opacity=50).

Recommended learning: css video tutorial

The above is the detailed content of How to hide text in CSS. For more information, please follow other related articles on the PHP Chinese website!