如何通过CSS隐藏特定字符_使用visibility:hidden或font-size:0-css教程-PHP中文网

精准隐藏特定字符唯一可行方案是text-indent:-9999px+white-space:nowrap+overflow:hidden+display:block组合，并用::after伪元素重绘保留文本；但会损害可访问性和seo，推荐改html加aria-hidden="true"。

如何通过css隐藏特定字符_使用visibility:hidden或font-size:0

用 `visibility: hidden` 隐藏特定文本会连带隐藏整个元素

如果你对一个包含多段文字的元素（比如 <h4 class="modal-title"></h4>）直接加 visibility: hidden，整块内容都会不可见——包括你想保留的 “algebra i , algebra ii”。它不区分子文本，只作用于整个元素盒模型。

常见错误现象是：目标文本消失了，但后面紧跟着的按钮或输入框也“跟着消失”了，实际只是因为父容器被设为不可见，导致其子节点一并失效（虽然仍占布局空间）。

使用场景受限于「必须保留元素占位 + 不影响可访问性」时才考虑它；但想精确控制某一段字符，这条路走不通。

`font-size: 0` 单独用基本无效，必须配合其他属性

只写 font-size: 0 并不能可靠隐藏文本。浏览器仍会渲染行框、保留行高和内联间距，尤其在 <span></span> 或 <b></b> 这类内联元素里，文字可能被压缩成一条细线或错位显示。

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

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

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

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

真正能精准隐藏特定字符的 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 的前提下，唯一能稳定剥离括号内文本的可行路径。