如何使用CSS隐藏类下的首个文本内容，保留子元素内容？

针对你给出的HTML结构：

<div class="class_1">
    FIRST TEXT               
    <div class="class_2">
        SECOND CONTENT
    </div>
</div>

可以通过以下几种CSS方法实现目标：

方法1：字体大小控制（推荐） #

通过将父元素的字体大小设为0隐藏文本节点，再单独恢复子元素的字体大小：

.class_1 {
  font-size: 0; /* 隐藏父元素内的纯文本内容 */
}
.class_1 .class_2 {
  font-size: 16px; /* 根据需求设置合适字体大小，恢复子元素内容显示 */
}

原理：父元素的font-size: 0会让其中的纯文本因字体尺寸为0而不可见，子元素通过单独设置font-size即可正常显示，兼容性好且对布局影响极小。

方法2：文本缩进移出可视区 #

将父元素的文本向左移出可视范围，子元素重置缩进规则：

.class_1 {
  text-indent: -9999px; /* 将文本移出可视区域 */
}
.class_1 .class_2 {
  text-indent: 0; /* 重置子元素缩进 */
  display: block; /* 确保子元素不受父元素缩进影响 */
}

注意：如果父元素设置了overflow: auto，可能会出现横向滚动条，需额外处理。

方法3：截断文本限制 #

通过限制父元素宽度并截断文本，子元素恢复正常布局：

.class_1 {
  white-space: nowrap; /* 强制文本不换行 */
  overflow: hidden; /* 隐藏超出部分 */
  width: 0; /* 限制父元素宽度为0，截断文本 */
}
.class_1 .class_2 {
  white-space: normal; /* 恢复子元素正常换行 */
  overflow: visible; /* 显示子元素全部内容 */
  width: auto; /* 重置子元素宽度 */
}

适用场景：适合父元素无额外宽度限制的情况，避免干扰其他布局。

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