Html 使用 CSS 隐藏文本，最佳实践？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12783419/
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 with CSS, Best Practice?
提问by deathlock
Let's say I have this element for displaying the website logo:
假设我有这个用于显示网站徽标的元素：
<div id="web-title">
<a href="http://website.com" title="Website" rel="home">
<span>Website Name</span>
</a>
</div>
The #blog-titlewould be styled with background:url(http://website.com/logohere.png), but how to properly hide the text Website Name? As seen here: Hide text using cssor here https://stackoverflow.com/a/2705328, I've seen various methods to hide the text, such as:
该#blog-title会与设置样式background:url(http://website.com/logohere.png)，但如何正确地隐藏文本Website Name？如此处所示：使用 css或此处https://stackoverflow.com/a/2705328隐藏文本，我已经看到了各种隐藏文本的方法，例如：
#web-title span { text-indent: -9999px; }
or
或者
#web-title span { font-size: -9999px; }
or
或者
#web-title span { position: absolute; top: -9999px; left: -9999px; }
I've also seen some combine those three methods. But actually which one is the best practice to hide text effectively?
我也看到一些结合这三种方法。但实际上哪一种是有效隐藏文本的最佳实践？
回答by coopersita
Actually, a new technique came out recently. This article will answer your questions: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement
实际上，最近出现了一项新技术。本文将回答您的问题：http: //www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
It is accessible, an has better performance than -99999px.
它是可访问的，比 -99999px 具有更好的性能。
Update: As @deathlock mentions in the comment area, the author of the fix above (Scott Kellum), has suggested using a transparent font: http://scottkellum.com/2013/10/25/the-new-kellum-method.html.
更新：正如@deathlock 在评论区提到的，上面修复程序的作者 ( Scott Kellum) 建议使用透明字体：http://scottkellum.com/2013/10/25/the-new-kellum-method html的。
回答by Yukulélé
you can simply make it transparent
你可以简单地让它透明
{
width: 20px;
height: 20px;
overflow: hidden;
color:transparent;
}
回答by Mr. Alien
Can't you use simply display: none;like this
你不能display: none;像这样简单地使用吗
HTML
HTML
<div id="web-title">
<a href="http://website.com" title="Website" rel="home">
<span class="webname">Website Name</span>
</a>
</div>
CSS
CSS
.webname {
display: none;
}
Or how about playing with visibility if you are concerned to reserve the space
或者如果您担心保留空间，如何玩能见度
.webname {
visibility: hidden;
}
回答by Mark
the way most developers will do is:
大多数开发人员会做的方式是：
<div id="web-title">
<a href="http://website.com" title="Website" rel="home">
<span class="webname">Website Name</span>
</a>
</div>
.webname {
display: none;
}
I used to do it too, until i realized that you are hiding content for devices. aka screen-readers and such.
我曾经也这样做过，直到我意识到您正在为设备隐藏内容。又名屏幕阅读器等。
So by passing:
所以通过：
#web-title span {text-indent: -9000em;}
you ensure that the text still is readable.
您确保文本仍然可读。
回答by Dhruv Batheja
Add .hide-text class to your span that has the text
将 .hide-text 类添加到具有文本的跨度
.hide-text{
display:none;
}
or make the text transparent
或使文本透明
.hide-text{
color:rgba(0,0,0,0);
}
use according to your use case.
根据您的用例使用。
回答by isapir
I do it like this:
我这样做：
.hidden-text {
left: 100%;
display: inline-block;
position: fixed;
}
回答by Neeraj
What Google(search bot) needs is same content should be served to bot as it is served to user. Indenting text away (any text) gets bot to think it is a spam or you are serving different content to user and bot.
Google（搜索机器人）需要的是向机器人提供与向用户提供相同的内容。缩进文本（任何文本）会让机器人认为它是垃圾邮件，或者您正在为用户和机器人提供不同的内容。
The best method is to directly use logo as an image inside your anchor tag. Give an 'alt' to your image. This will be perfect for bot to read & also will help in image searching.
最好的方法是直接使用徽标作为锚标签内的图像。给你的形象一个“alt”。这将非常适合机器人阅读，也将有助于图像搜索。
This is straight from the horse's mouth: http://www.youtube.com/watch?v=fBLvn_WkDJ4
回答by Joel Kinzel
As of September of 2015, the most common practice is to use the following CSS:
截至 2015 年 9 月，最常见的做法是使用以下 CSS：
.sr-only{
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
}
回答by millimoose
If you're willing to accomodate this in your markup (as you are in your question with the holding the text), I'd go with whatever jQuery UI went with in their CSS helpers:
如果你愿意在你的标记中适应这一点（就像你在你的问题中持有文本一样），我会在他们的CSS 助手中使用任何 jQuery UI ：
.ui-helper-hidden-accessible {
position: absolute !important;
clip: rect(1px 1px 1px 1px);
clip: rect(1px,1px,1px,1px);
}
The image replacement techniques are good if you absolutely refuse to add extra markup for the text to be hidden in the container for the image.
如果您绝对拒绝为要隐藏在图像容器中的文本添加额外的标记，则图像替换技术是很好的。
回答by Jim T.
I realize this is an old question, but the Bootstrap framework has a built in class (sr-only) to handle hiding text on everything but screen readers:
我意识到这是一个老问题，但是 Bootstrap 框架有一个内置类（仅限 sr）来处理除屏幕阅读器之外的所有内容的隐藏文本：
<a href="/" class="navbar-brand"><span class="sr-only">Home</span></a>
