CSS隐藏文字的6种方法

以下是详细讲解“CSS隐藏文字的6种方法”的完整攻略：

1. 使用font-size:0

这是一种最简单却也最常用的方法。将元素的字体大小设为0，即可实现隐藏文字的效果。

.hide-text {
  font-size: 0;
}

2. 使用text-indent

通过设置文本缩进，将文字缩进到盒子的左侧或者右侧，实现隐藏文字的效果。

.hide-text {
  text-indent: -9999px;
}

3. 使用visibility

设置元素的可见性为hidden，即可实现将元素内部的文字全部隐藏的效果。

.hide-text {
  visibility: hidden;
}

4. 使用opacity

将元素的不透明度设置为0，即可实现隐藏文字的效果。

.hide-text {
  opacity: 0;
}

5. 使用text-shadow

将文字的text-shadow设置为跟背景色一致的颜色，并且让文字的阴影位置与文字重合即可实现隐藏文字的效果。

.hide-text {
  text-shadow: 0 0 0 #fff;
}

6. 使用position和z-index

将元素的position设置为absolute或fixed，并将z-index设置为负数，即可将元素隐藏在其他元素后面，进而实现隐藏文字的效果。

.hide-text {
  position: absolute;
  left: -9999px;
  z-index: -1;
}

示例1：

<div class="hide-text">这是需要被隐藏的文字</div>

.hide-text {
  font-size: 0;
}

示例2：

<a href="#" class="hide-text">点击进入</a>

.hide-text {
  text-indent: -9999px;
  display: block;
  width: 100px;
  height: 50px;
  background-color: #ccc;
}

以上就是“CSS 隐藏文字的 6 种方法”的完整攻略和两条示例说明。希望对你有所帮助。