43

假设我有这个元素用于显示网站徽标：

<div id="web-title">
  <a href="http://website.com" title="Website" rel="home">
    <span>Website Name</span>
  </a>
</div>

将#web-title被设置样式background:url(http://website.com/logohere.png)，但如何正确隐藏文本Website Name？如此处所示：使用 css 隐藏文本或此处https://stackoverflow.com/a/2705328，我已经看到了各种隐藏文本的方法，例如：

#web-title span { text-indent: -9999px; }

或者

#web-title span { font-size: -9999px; }

或者

#web-title span { position: absolute; top: -9999px; left: -9999px; }

我还看到一些结合了这三种方法。但实际上哪一个是有效隐藏文本的最佳实践？

4

12 回答 12

80

实际上，最近出现了一项新技术。本文将回答您的问题：http ://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

它是可访问的，具有比-99999px更好的性能。

更新：正如@deathlock 在评论区提到的，上述修复的作者（Scott Kellum）建议使用透明字体：http ://scottkellum.com/2013/10/25/the-new-kellum-method .html。

于 2012-10-08T14:12:44.387 回答
19

你可以简单地让它透明

{
   width: 20px;
   height: 20px;
   overflow: hidden; 
   color:transparent;
}
于 2015-02-01T17:38:36.907 回答
6

你不能display: none;像这样简单地使用吗

HTML

<div id="web-title">
   <a href="http://website.com" title="Website" rel="home">
       <span class="webname">Website Name</span>
   </a>
</div>

CSS

.webname {
   display: none;
}

或者，如果您担心保留空间，那么如何玩弄能见度

.webname {
   visibility: hidden;
}
于 2012-10-08T14:10:51.083 回答
3

大多数开发人员的做法是：

<div id="web-title">
   <a href="http://website.com" title="Website" rel="home">
       <span class="webname">Website Name</span>
   </a>
</div>

.webname {
   display: none;
}

我曾经也这样做过，直到我意识到您正在为设备隐藏内容。又名屏幕阅读器等。

所以通过：

#web-title span {text-indent: -9000em;}

您确保文本仍然可读。

于 2012-10-08T14:49:50.137 回答
2

将 .hide-text 类添加到具有文本的跨度

.hide-text{
display:none;
 }

或使文本透明

.hide-text{
 color:rgba(0,0,0,0);
 }

根据您的用例使用。

于 2016-06-27T06:59:23.367 回答
0

如果您愿意在您的标记中容纳这一点（就像您在持有文本的问题中提出的那样），我会使用他们的CSS 帮助程序中使用的任何 jQuery UI ：

.ui-helper-hidden-accessible { 
    position: absolute !important; 
    clip: rect(1px 1px 1px 1px); 
    clip: rect(1px,1px,1px,1px); 
}

如果您绝对拒绝为要隐藏在图像容器中的文本添加额外标记，则图像替换技术很好。

于 2012-10-08T14:32:10.337 回答
0

谷歌（搜索机器人）需要的是相同的内容应该提供给机器人，因为它提供给用户。缩进文本（任何文本）会让机器人认为它是垃圾邮件，或者您正在向用户和机器人提供不同的内容。

最好的方法是直接使用徽标作为锚标签内的图像。为您的图像添加“alt”。这将非常适合机器人阅读，也将有助于图像搜索。

这是直接出自马口：http ://www.youtube.com/watch?v=fBLvn_WkDJ4

于 2013-04-12T04:52:24.827 回答
0

截至 2015 年 9 月，最常见的做法是使用以下 CSS：

.sr-only{
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    width: 1px;
}
于 2015-09-24T15:09:14.273 回答
0

我这样做：

.hidden-text {
  left: 100%;
  display: inline-block;
  position: fixed;
}
于 2016-07-22T19:06:15.087 回答
0

其他方式

position: absolute;
top: 0px;
left: -5000px;
于 2020-11-13T04:34:38.850 回答
0

它可能会起作用。

.hide-text {
    opacity:0;
    pointer-events:none;
    overflow:hidden;
}
于 2020-12-24T18:13:01.340 回答
-2

我意识到这是一个老问题，但是 Bootstrap 框架有一个内置类（仅限 sr）来处理除屏幕阅读器之外的所有内容上的隐藏文本：

<a href="/" class="navbar-brand"><span class="sr-only">Home</span></a>
于 2014-06-17T16:03:56.337 回答