CSS隐藏特定字符：visibility:hidden与font-size:0详解

要让它起作用，得组合使用：

• font-size: 0 消除字号
• line-height: 0 消除行高撑开
• overflow: hidden 切掉可能溢出的残留像素
• display: block（对内联元素必需）确保样式生效

但即便如此，它仍无法精准定位到“括号里的数字部分”，除非你先把那段文本单独包裹进一个可选中的标签里。

真正能精准隐藏特定字符的 CSS 方式只有两种

前提是你**不能改 HTML 结构**（如资料中提到的第三方库生成内容），那就只能靠视觉偏移+裁剪。推荐以下组合：

• text-indent: -9999px：把第一行文本推到视口外左侧
• white-space: nowrap：防止换行破坏偏移效果
• overflow: hidden：切掉被推出去的部分
• display: block：确保 text-indent 对目标元素生效（它只对块级元素有效）

例如针对

algebra i , algebra ii (2 free spaces)

.modal-title {
  display: block;
  text-indent: -9999px;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
.modal-title::after {
  content: "algebra i , algebra ii";
  position: absolute;
  left: 0;
  top: 0;
  text-indent: 0;
  font-size: inherit;
  line-height: inherit;
}

这个方案本质是「覆盖重绘」，不是纯隐藏——但它是在不改 HTML 的前提下，唯一能稳定剥离括号内文本的可行路径。

最容易被忽略的坑：可访问性和 SEO 影响

所有纯 CSS 隐藏手段（text-indent、font-size: 0、visibility: hidden）都不会让屏幕阅读器跳过内容。如果括号里是关键提示（比如库存状态），用这些方式隐藏等于对视障用户“假装不存在”。

更隐蔽的问题是：搜索引擎仍会索引这些被视觉隐藏的文字，可能导致页面语义混乱。真正安全的做法，还是把那段文本包进带 aria-hidden="true" 的 里——哪怕多一个标签，也比后期排查无障碍合规问题省力得多。

终于介绍完啦！小伙伴们，这篇关于《CSS隐藏特定字符：visibility:hidden与font-size:0详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！