在 HTML 中隐藏文本?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16083647/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 07:39:48  来源:igfitidea点击:

Hide text within HTML?

htmlcss

提问by

I'll be completing a website soon for my university (in fact, it's mostly finished now other than some mild tweaking) and I'd like to add a hidden thank-you to some bloggers who helped, and the stack overflow community which was a huge help. Right now, I've got a text section which is hidden this way:

我很快就会为我的大学完成一个网站(事实上,除了一些轻微的调整之外,它现在大部分已经完成了)我想向一些提供帮助的博主以及堆栈溢出社区添加一个隐藏的感谢一个巨大的帮助。现在,我有一个以这种方式隐藏的文本部分:

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

But I feel like there's probably a better way. Is there?

但我觉得可能有更好的方法。在那儿?

采纳答案by Chris Till

Have you checked out http://humanstxt.org/. It's built exactly for your purpose :)

你有没有检查过http://humanstxt.org/。它完全为您的目的而构建:)

回答by

This will keep its space, but not show anything;

这将保留其空间,但不显示任何内容;

opacity: 0.0;

This will hide the object fully, plus its (reserved) space;

这将完全隐藏对象,加上它的(保留)空间;

display: none;

回答by Lowkase

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

回答by PSR

you can use css property to hide style="display:none;"

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

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

回答by Stephen

Here are two ways you can achieve this

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

You can display none or have a opacity none...But if you want the opacity to be cross browser compatible you would have to add this to your css

您可以不显示或不显示不透明度...但是如果您希望不透明度跨浏览器兼容,则必须将其添加到您的 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

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

回答by unor

You said that you can't use HTML comments because the CMS filters them out. So I assume that you really want to hide this content and you don't need to display it ever.

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

In that case, you shouldn't use CSS (only), as you'd only play on the presentation level, not affecting the content level. Your content should also be hidden for user-agents ignoring the CSS (people using text browsers, feed readers, screen readers; bots; etc.).

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

In HTML5 there is the global hiddenattribute:

在 HTML5 中有全局hidden属性

When specified on an element, it indicates that the element is not yet, or is no longer, directly relevant to the page's current state, or that it is being used to declare content to be reused by other parts of the page as opposed to being directly accessed by the user. User agents should not render elements that have the hiddenattribute specified.

当在元素上指定时,它表示该元素尚未或不再与页面的当前状态直接相关,或者它正被用于声明要被页面其他部分重用的内容,而不是用户直接访问。用户代理不应呈现具有hidden指定属性的元素。

Example (using the smallelementhere, because it's an "attribution"):

示例(使用这里的small元素,因为它是一个“属性”):

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

As a fallback (for user-agents that don't know the hiddenattribute), you can specify in your CSS:

作为后备(对于不知道该hidden属性的用户代理),您可以在 CSS 中指定:

[hidden] {display:none;}

An general element for plain text could be the scriptelement used as "data block":

纯文本的通用元素可以是用作“数据块”script元素:

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

Alternatively, you could also use data-*attributeson existing elements (resp. on new divelements if you want to group some elements for the attribution):

或者,您也可以在现有元素上使用data-*属性div如果您想为属性分组一些元素,则可以在新元素上使用):

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

回答by Jordan Poulton

Not sure if this was what you were asking for, but I was personally trying to 'hide' some info in my html so that if someone inspected it, they would see the text in the source code.

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

It turns out that you can add ANY attribute, and so long as it isn't understood by the browser, it will just be left buried in the tag. My code was an easter egg: For people who couldn't afford to do the Makers Academy course, I basically encouraged them to inspect the element, where they would be given a secret URL where they could apply for a special, cut-price course (it's in haml, but it's the same idea in 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.

Or in html:

或者在 html 中:

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

Because 'url' is not a recognised html attribute, it makes no difference but is still discoverable. You could do the same with anything you wanted. You could have an attribute (in html) like:

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

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

And they'll be able to find your little easter egg if they want it... Hope that helps - it certainly helped me :)

如果他们想要,他们将能够找到你的小复活节彩蛋......希望有帮助 - 它肯定对我有帮助:)

回答by joseph

Use the CSS property visibilityand set it to hidden.

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

You can see more here.

你可以在这里看到更多。

回答by mmpatel009

use css property style="display:none"or style=visibility:hidden"

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