如何使用CSS隐藏父元素文本内容但保留子元素正常显示？

有两种成熟的CSS方案可实现需求，无需修改原有HTML结构：

方案1：字号清零法（最推荐，无额外空间占用） #

给父容器设置字号为0，隐藏所有直接文本节点，再单独给需要保留的span元素恢复正常字号即可：

.a {
  font-size: 0;
}
.a .b {
  font-size: 16px; /* 替换为实际需要的字号即可 */
}

注意：如果span.b内部用到em等相对字号单位，替换为固定单位或对应调整数值即可避免继承影响。

方案2：文本缩进裁剪法 #

如果需要保留父容器原有字号继承逻辑，可以用文本溢出裁剪的方式实现：

.a {
  overflow: hidden;
  text-indent: -9999px;
}
.a .b {
  float: left;
  text-indent: 0;
}

该方案通过负缩进把冗余文本移出父容器可视区域，再让span.b脱离父元素文本流不受缩进影响，也不会产生多余空间占用。

内容的提问来源于stack exchange，提问作者Jude Quintero