精准隐藏特定字符唯一可行方案是text-indent:-9999px+white-space:nowrap+overflow:hidden+display:block组合，并用::after伪元素重绘保留文本；但会损害可访问性和SEO，推荐改HTML加aria-hidden="true"。
用 visibility: hidden 隐藏特定文本会连带隐藏整个元素
如果你对一个包含多段文字的元素（比如 <h4 class="modal-title">）直接加 visibility: hidden，整块内容都会不可见——包括你想保留的 “algebra i , algebra ii”。它不区分子文本，只作用于整个元素盒模型。
常见错误现象是：目标文本消失了，但后面紧跟着的按钮或输入框也“跟着消失”了，实际只是因为父容器被设为不可见，导致其子节点一并失效（虽然仍占布局空间）。
使用场景受限于「必须保留元素占位 + 不影响可访问性」时才考虑它；但想精确控制某一段字符，这条路走不通。
font-size: 0 单独用基本无效，必须配合其他属性
只写 font-size: 0 并不能可靠隐藏文本。浏览器仍会渲染行框、保留行高和内联间距，尤其在 <span> 或 <b> 这类内联元素里，文字可能被压缩成一条细线或错位显示。
立即学习“前端免费学习笔记（深入）”；
要让它起作用，得组合使用：
-
font-size: 0消除字号 -
line-height: 0消除行高撑开 -
overflow: hidden切掉可能溢出的残留像素 -
display: block（对内联元素必需）确保样式生效
但即便如此，它仍无法精准定位到“括号里的数字部分”，除非你先把那段文本单独包裹进一个可选中的标签里。
真正能精准隐藏特定字符的 CSS 方式只有两种
前提是你**不能改 HTML 结构**（如资料中提到的第三方库生成内容），那就只能靠视觉偏移+裁剪。推荐以下组合：
-
text-indent: -9999px：把第一行文本推到视口外左侧 -
white-space: nowrap：防止换行破坏偏移效果 -
overflow: hidden：切掉被推出去的部分 -
display: block：确保text-indent对目标元素生效（它只对块级元素有效）
例如针对 <h4 class="modal-title">algebra i , algebra ii (2 free spaces)</h4>，你可以这样写：
.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" 的 <span> 里——哪怕多一个标签，也比后期排查无障碍合规问题省力得多。
