隐藏元素中的文本节点，但不隐藏子节点答案

【问题标题】：Hide text node in element, but not children隐藏元素中的文本节点，但不隐藏子节点
【发布时间】：2013-02-18 06:00:21
【问题描述】：

我在使用 CSS 时遇到了一点问题，似乎找不到解决方案。我有这个 HTML

<div id="closelink">
  <a href="">Close</a>
  Click to close
</div>

现在我只想隐藏文本«Click to close»，既不隐藏 div，也不隐藏其中的链接。

这个可以吗？

【问题讨论】：

【解决方案1】：

visibility 属性可以在子元素上被覆盖，因此您可以这样做：

#closelink {
  visibility: collapse;
}

#closelink a {
  visibility: visible;
}

<div id="closelink">
  <a href="">Close</a> Click to close
</div>

【讨论】：

infos 的补充：w3.org/wiki/CSS/Properties/visibilitycollapse 此值会导致整个行或列从显示中删除，而通常由行或列占用的空间可用于其他内容。此值用于行、行组、列和列组元素。如果用于行、行组、列或列组以外的元素，“折叠”与“隐藏”具有相同的含义。
不错，但不能将图像用作文本前的图标
这对我有用，尽管我确实必须将 line-height:0; 添加到 xpy 的 #closelink。由于后面没有文本，并且图像链接设置了它们的高度，因此我不必为 #closelink a 选择器添加 line-height:n。

【解决方案2】：

.closelink {
  font-size: 0px;
}

.close-link a {
  font-size: 12px;
}

【讨论】：

这没有提供问题的答案。要批评或要求作者澄清，请在其帖子下方发表评论。
这也将保留父母的边界，如果存在的话。为我工作:)
@Maxime Lorant，这个答案非常适合我的情况。有时人们需要的是生活中更简单的东西。纯 CSS 取胜！我需要在 td 中隐藏内容，然后动态转换内容，然后将其显示在同一 td 父级的子元素中。
这个答案对我有用，接受的解决方案没有（它保持父空间可见）。
为我工作，也删除了空间。

【解决方案3】：

试试

#closelink {
  position: relative;
  left: -9999px;
}

#closelink a {
  position: relative;
  left: 9999px;
}

<div id="closelink">
  <a href="">Close</a> Click to close
</div>

【讨论】：

【解决方案4】：

它有效，但您可以使用 visibility:hidden 代替 visibility:collapse

【讨论】：

【解决方案5】：

为了避免子元素换行（就像使用 visibility: hidden/collapse 和 visibility: visible 一样），并避免在浏览器中绘制 9999px 块（通常不赞成，因为它是不必要的开销），请尝试这个：

#closelink {
  position: relative;
  visibility: hidden;
}

#closelink a {
  position: absolute;
  left: 0;
  top: 0;
  visibility: visible;
}

<div id="closelink">
  <a href="">Close</a> Click to close
</div>

您可以调整您的 left: 0 值以提供一些填充。

【讨论】：

【解决方案6】：

我能想到三种方法：

一个

#parent {
  opacity: 1;
}

.child {
  opacity: 0;
}

<div id="parent">
  dkjfdkf
  <span class="child">Annoying text</span>
</div>

两个

.child {
  visibility: hidden;
}

<div id="parent">
  dkjfdkf
  <span class="child">Annoying text</span>
</div>

三个

.child {
  display: none;
}

<div id="parent">
  dkjfdkf
  <span class="child">Annoying text</span>
</div>

如果您希望图像始终在页面上以保持结构，但不希望它可见，则最好使用不透明度。希望这对您有所帮助。

【讨论】：