CSS 隐藏元素中的文本节点，但不隐藏子节点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15196630/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide text node in element, but not children
提问by elveti
I'm having a little trouble with CSS and can't seem to find a solution. I have this HTML
我在使用 CSS 时遇到了一些麻烦，似乎找不到解决方案。我有这个 HTML
<div id="closelink">
<a href="">Close</a>
Click to close
</div>
Now I want to hide the text ?Click to close? only, without hiding neither the div, nor the link within it.
现在我想隐藏文本？点击关闭？只是，既不隐藏 div，也不隐藏其中的链接。
Can this be done?
这能做到吗？
回答by xpy
The visibilityattribute can be overriden on children elements, so you are able to do this:
visibility可以在子元素上覆盖该属性，因此您可以执行以下操作：
<div id="closelink">
<a href="">Close</a>
Click to close
</div>
CSS:
CSS：
#closelink {
visibility:collapse;
}
#closelink a{
visibility:visible;
}
And the result is this: http://jsfiddle.net/pavloschris/Vva84/
回答by Th?nh Ph?m
.closelink {
font-size: 0px;
}
.close-link a {
font-size: 12px;
}
回答by Dipesh Parmar
Try
尝试
<div id="closelink">
<a href="">Close</a>
Click to close
</div>
#closelink {
position: relative;
left: -9999px;
}
#closelink a {
position: relative;
left: 9999px;
}
回答by mamath
It works but you can use visibility:hiddeninstead of visibility:collapse
它有效，但您可以使用visibility:hidden代替visibility:collapse
回答by Robert Henderson
To avoid the child element breaking to a new line (as happens with just using visibility: hidden/collapse; and visibility: visible), and to avoid drawing a 9999px block in the browser (generally frowned upon as it is unnecessary overhead), try this:
为了避免子元素换行（就像只使用可见性：隐藏/折叠；和可见性：可见），并避免在浏览器中绘制 9999px 块（通常不赞成，因为它是不必要的开销），请尝试这个：
<div id="closelink">
<a href="">Close</a>
Click to close
</div>
#closelink {
position: relative;
visibility: hidden;
}
#closelink a {
position: absolute;
left: 0;
top: 0;
visibility: visible;
}
You can adjust your left: 0value to provide some padding.
您可以调整您的left: 0值以提供一些填充。
回答by Orane Findley
There are three methods I could think of:
我能想到的方法有以下三种：
One
一
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#parent{
opacity: 1;
}
.child{
opacity: 0;
}
</style>
</head>
<body>
<div id="parent">
dkjfdkf
<span class="child">Annoying text</span>
</div>
</body>
</html>
Two
二
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#parent{
}
.child{
visibility: hidden;
}
</style>
</head>
<body>
<div id="parent">
dkjfdkf
<span class="child">Annoying text</span>
</div>
</body>
</html>
Three
三
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#parent{
}
.child{
display: none;
}
</style>
</head>
<body>
<div id="parent">
dkjfdkf
<span class="child">Annoying text</span>
</div>
</body>
</html>
Opacity is best if you want the image to always be on the page to keep the structure but, you don't want it to be visible. Hope this was helpful.
如果您希望图像始终在页面上以保持结构但不希望它可见，则不透明度是最好的。希望这是有帮助的。
