如何用CSS隐藏指定HTML标签及其关联内容（不可修改HTML）

问题分析 #

核心问题在于：第二个<b>标签后的文本是独立的文本节点，并非<b>的子元素，因此直接隐藏<b>标签无法覆盖关联文本，且无法修改现有HTML结构。

可行解决方案 #

方案1：现代浏览器首选 - 单行截断法 #

利用WebKit的多行截断属性，限制父容器仅显示第一行内容，自动隐藏第二行的<b>标签和关联文本：

#content-list {
  display: -webkit-box;
  -webkit-line-clamp: 1; /* 指定只显示1行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

方案2：兼容旧浏览器 - 行高裁剪法 #

如果需要兼容非WebKit内核的旧浏览器，可通过设置父容器最大高度等于单行内容高度，配合overflow:hidden实现隐藏：

#content-list {
  max-height: 1.5em; /* 替换为实际内容的行高，默认行高通常为字体大小的1.5倍 */
  overflow: hidden;
}

说明 #

• 方案1无需提前知晓行高，代码简洁，适配Chrome、Safari、Edge等现代浏览器；
• 方案2需要确定单行内容高度，兼容性更强，支持更多旧版浏览器；
• 两种方案均无需修改现有HTML结构，完全通过CSS满足需求。

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