在 HTML 中隐藏文本？答案

【问题标题】：Hide text within HTML?在 HTML 中隐藏文本？
【发布时间】：2013-04-18 12:59:30
【问题描述】：

我很快就会为我的大学完成一个网站（事实上，除了一些轻微的调整外，它现在大部分都完成了），我想向一些帮助过的博主添加一个隐藏的感谢，并且堆栈溢出社区，这是一个巨大的帮助。现在，我有一个以这种方式隐藏的文本部分：

<font style="font-size:0px"> - text </font>

但我觉得可能有更好的方法。有吗？

【问题讨论】：

字体标签已弃用...不要使用它。
你的大学告诉你使用<font>吗？
如果无论如何都看不到，为什么不把它放在评论中（）？
@ZacBrown 好吧。好的。不久前我正在帮助一个正在学习网页设计的人，他告诉我他的导师告诉我们bgcolor，<marquee>。这太可怕了。这真的让我质疑英国的网络课程。
@Chris Marquee？真的吗？自从我的第一个 Angelfire 网站以来，我还没有看到过这种情况，比如...... 15 年前？哈哈哈 ;-)

标签： html css

【解决方案1】：

这将保留其空间，但不显示任何内容；

opacity: 0.0;

这将完全隐藏对象及其（保留的）空间；

display: none;

【讨论】：

【解决方案2】：

<div style="display:none;">CREDITS_HERE</div>

【讨论】：

【解决方案3】：

你可以使用css属性隐藏style="display:none;"

<div style="display:none;">CREDITS_HERE</div>

【讨论】：

【解决方案4】：

您说您不能使用 HTML cmets，因为 CMS 会将它们过滤掉。所以我假设你真的想隐藏这个内容，你不需要显示它。

在这种情况下，您不应该（仅）使用 CSS，因为您只会在演示级别上播放，而不会影响内容级别。对于忽略 CSS 的用户代理（使用文本浏览器、提要阅读器、屏幕阅读器；机器人等）的用户代理，您的内容也应该隐藏。

在 HTML5 中有全局 hidden attribute:

当在一个元素上指定时，它表示该元素尚未或不再与页面的当前状态直接相关，或者它被用于声明内容以供页面的其他部分重用为与用户直接访问相反。用户代理不应渲染指定了 hidden 属性的元素。

示例（此处使用small element，因为它是一个“归属”）：

<small hidden>Thanks to John Doe for this idea.</small>

作为后备（对于不知道 hidden 属性的用户代理），您可以在 CSS 中指定：

[hidden] {display:none;}

纯文本的一般元素可以是script 元素used as "data block"：

<script type="text/plain" hidden>
Thanks to John Doe for this idea.
</script>

或者，您也可以在现有元素上使用data-* attributes（如果您想为归属地分组一些元素，则分别在新的div元素上）：

<p data-attribution="Thanks to John Doe for this idea!">This is some visible example content …</p>

【讨论】：

谢谢@Unor。我认为
我添加了另一种方式：在现有元素上使用data-* 属性。

【解决方案5】：

display: none 或visibility: hidden。

【讨论】：

可见性没有得到很好的支持。最好使用不透明度。
不要以为我只是在谈论 IE :P
@Allendar 那你为什么不告诉我你在说什么？
DOM 对象将失去它的事件和标签顺序绑定（或至少；使它们暂时无响应）。这可能会导致令人费解的情况，即人们不明白为什么当您尝试单击/悬停等时保留区域没有响应。这就是我所说的。 (?)

【解决方案6】：

这里有两种方法可以实现这一点

您可以不显示或不显示不透明度...但是如果您希望不透明度与跨浏览器兼容，则必须将其添加到您的 css 中

/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* IE 5-7 */
filter: alpha(opacity=50);

/* Netscape */
-moz-opacity: 0.5;

/* Safari 1.x */
-khtml-opacity: 0.5;

/* Good browsers */
opacity: 0.5;

http://codepen.io/anon/pen/Krkfj

【讨论】：

【解决方案7】：

不确定这是否是您所要求的，但我个人试图在我的 html 中“隐藏”一些信息，以便如果有人检查它，他们会看到源代码中的文本。

事实证明，你可以添加任何属性，只要浏览器不理解，它就会被埋在标签中。我的代码是一个复活节彩蛋：对于那些负担不起Makers Academy课程的人，我基本上鼓励他们检查元素，在那里他们将获得一个秘密URL，他们可以在那里申请特殊的低价课程（它在haml中，但在HTML中是相同的想法）：

.entry
        %h2 I can't afford to do the course... What should I do?
        %p{:url_you_should_visit => 'http://ronin.makersacademy.com'} Inspect and you shall find.

或者在html中：

<p url_you_should_visit="http://ronin.makersacademy.com">Inspect and you shall find.</p>

因为 'url' 不是公认的 html 属性，所以它没有区别，但仍然可以发现。你可以对任何你想要的东西做同样的事情。你可以有一个属性（在 html 中），比如：

<p thanks="Thanks to all the bloggers that helped me"> Some text </p>

如果他们想要的话，他们会找到你的小复活节彩蛋...希望有帮助 - 它确实帮助了我 :)

【讨论】：

【解决方案8】：

使用 css 属性 style="display:none" 或 style=visibility:hidden"

【讨论】：

【解决方案9】：

使用 CSS 属性 visibility 并将其设置为 hidden。

你可以看到更多here。

【讨论】：