如何使用CSS隐藏指定HTML结构中img标签后方的文本

注意：你提供的原始HTML存在语法疏漏——div标签的id属性误用了冒号做分隔符（正确写法是id="hideen_text"），且标签没有闭合，写代码的时候要先修正这个问题，不然CSS选择器会匹配不到目标元素。

不需要改动原有HTML结构的前提下，有两个可落地的实现方案，分别适配不同的使用场景：

• 方案一：固定高度裁切法
  把链接标签设置为行内块元素，将容器高度锁定为内部img的实际渲染高度，超出容器范围的内容直接通过overflow: hidden裁切，就能把img后面的裸文本完全挡住。
  参考CSS代码：

  #hideen_text a {
    display: inline-block;
    /* 高度值和img实际显示高度保持一致 */
    height: 168.5px;
    overflow: hidden;
  }
  #hideen_text a img {
    display: block;
    width: 250px;
    height: 168.5px;
  }
  

  适用场景：图片尺寸固定、不存在响应式动态调整的页面。要注意如果图片尺寸变动，对应的容器高度值也要同步调整，不然会出现裁切不全、误切图片的问题。
• 方案二：零字号隐藏法
  因为目标文本是没有包裹标签的裸文本节点，没法通过CSS选择器直接选中，我们可以通过全局压零父元素字号的方式让文本不可见，再单独把img的字号恢复为默认值（img作为替换元素，本身显示效果不受字号设置影响）。
  参考CSS代码：

  #hideen_text a {
    /* 把链接内部的所有文本字号压为0，裸文本会完全没有占位、不可见 */
    font-size: 0;
  }
  #hideen_text a img {
    /* 恢复默认字号，避免影响其他可能的元素 */
    font-size: initial;
  }
  

  适用场景：a标签内部除了img和要隐藏的裸文本，没有其他需要保留的可见文本。这个方案不需要计算图片高度，不存在裁切错位的问题，适配响应式场景更稳定。

方案选型提示：

• 如果a标签内后续会添加其他需要正常显示的文本内容，不要使用零字号方案，会连带隐藏新增的文本
• 如果页面是响应式设计、图片宽度会随屏幕尺寸动态变化，不要使用固定高度裁切方案，容易出现适配偏差

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