如何使用CSS隐藏span标签内的部分文本？含隐藏“In stock”需求

嘿，我来帮你搞定这两个CSS文本隐藏的问题，结合你给出的HTML结构，咱们一步步拆解：

隐藏span内的部分文本，得根据文本的位置（开头、中间、结尾）和是否有子标签包裹来选择方法，这里给你几个实用的方案：

• 方案1：伪元素覆盖法（适合已知隐藏区域位置+背景色单一）
  如果要隐藏的文本在固定位置，且父元素背景色是纯色，可以用绝对定位的伪元素把它盖住：

  /* 假设目标span有class "target-span" */
  .target-span {
    position: relative;
  }
  .target-span::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0; /* 调整left/right定位隐藏区域 */
    width: 70px; /* 宽度刚好覆盖要隐藏的文本 */
    height: 100%;
    background-color: #fff; /* 必须和父元素背景色一致 */
  }
  

• 方案2：字体大小重置法（适合部分文本有子标签包裹）
  把父span的字体设为0，让所有裸文本节点隐藏，再给需要保留的子元素恢复字体大小；如果还有末尾无标签的文本要保留，用伪元素补回去：

  .target-span {
    font-size: 0;
  }
  /* 给要保留的子元素恢复字体 */
  .target-span .keep-visible {
    font-size: 16px; /* 替换成你实际的字体大小 */
    margin: 0 4px;
  }
  /* 补回需要保留的末尾文本 */
  .target-span::after {
    content: "要保留的末尾内容";
    font-size: 16px;
  }
  

• 方案3：文本缩进法（适合隐藏开头文本）
  把span转为块级元素，用负文本缩进把开头文本移出视口，再给要保留的子元素把缩进加回来：

  .target-span {
    display: block;
    text-indent: -9999px;
    overflow: hidden;
  }
  .target-span .keep-visible {
    display: inline-block;
    text-indent: 9999px;
  }
  

针对你给出的这段HTML：

<span class="option__title option__title testdhana">In stock | <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>12.00</span> | CHICKEN BIRYANI</span>

最稳妥的方法是用字体大小重置+伪元素补全，既不影响动态价格，又能精准隐藏“In stock”：

.testdhana {
  font-size: 0; /* 隐藏所有裸文本节点（包括"In stock |"和末尾的"CHICKEN BIRYANI"） */
}
/* 恢复价格区域的字体大小 */
.testdhana .woocommerce-Price-amount {
  font-size: 16px; /* 替换成你实际的字体大小 */
  margin-right: 8px; /* 保留原有的间距 */
}
/* 补回需要保留的"| CHICKEN BIRYANI" */
.testdhana::after {
  content: "| CHICKEN BIRYANI";
  font-size: 16px; /* 和价格区域字体大小一致 */
}

如果你的背景色是纯色，也可以用伪元素直接覆盖“In stock”：

.testdhana {
  position: relative;
}
.testdhana::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 65px; /* 调整宽度刚好覆盖"In stock "（注意后面的空格） */
  height: 100%;
  background-color: #fff; /* 匹配父元素背景色 */
}

这个方法的缺点是需要手动调整宽度，而且如果文本字号变化，宽度也要跟着改，不如第一个方法灵活。

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