使用css隐藏文本

时间：2009-01-23 01:19:06

标签： css

我的html中有一个标签，如下所示：

<h1>My Website Title Here</h1>

使用css我想用我的实际徽标替换文本。通过调整标签大小并在via css中放置背景图像，我的徽标没有问题。但是，我无法弄清楚如何摆脱文本。我之前已经看过它，基本上是将文本从屏幕上移开。问题是我不记得我在哪里看到它。

31 个答案:

答案 0 :(得分：410)

这是一种方式：

h1 {
    text-indent: -9999px;                 /* sends the text off-screen */
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width: 600px;
    white-space: nowrap;            /* because only the first line is indented */
}

h1 a {
    outline: none;  /* prevents dotted line when link is active */
}

这是another way隐藏文本，同时避开浏览器将创建的巨大的9999像素框：

h1 {
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;

    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

答案 1 :(得分：170)

为什么不简单地使用：

h1 { color: transparent; }

答案 2 :(得分：149)

只需将font-size: 0;添加到包含文字的元素即可。

.hidden { font-size: 0; }
  font-size: 0; hides text. <span class="hidden"> You can't see me :) </span>

答案 3 :(得分：31)

最跨浏览器的友好方式是将HTML编写为

<h1><span>Website Title</span></h1>

然后使用CSS隐藏范围并替换图像

h1 {background:url(/nicetitle.png);}
h1 span {display:none;}

如果您可以使用CSS2，那么使用content属性有一些更好的方法，但不幸的是，网络还不是100％。

答案 4 :(得分：19)

隐藏带有辅助功能的文本：

除了其他答案之外，这是另一种隐藏文字的有用方法。

此方法有效地隐藏文本，但允许其对屏幕阅读器保持可见。如果可访问性是一个问题，这是一个考虑的选项。

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

值得指出的是，此课程目前在Bootstrap 3中使用。

如果您对阅读可访问性感兴趣：

答案 5 :(得分：19)

Jeffrey Zeldman建议采用以下解决方案：

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

它的资源密集度应该低于-9999px;

请在此处阅读所有相关内容：

http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

答案 6 :(得分：15)

请参阅mezzoblue以获取每项技术的精彩摘要，包括优点和缺点，以及示例html和css。

答案 7 :(得分：7)

这么多复杂的解决方案。

最简单的就是使用：

$(document).on("pageshow", "#pageID", function() {
    $("#sp").hide();
    $("#fea").hide();
    $("#lib").show();
});

答案 8 :(得分：6)

不要使用{ display:none; }它会使内容无法访问。您希望屏幕阅读器能够看到您的内容，并通过用图像（如徽标）替换文本来对其进行视觉设计。通过使用text-indent: -999px;或类似的方法，文本仍然存在 - 只是在视觉上没有。使用display:none，文字消失了。

答案 9 :(得分：5)

您可以使用css background-image属性和z-index来确保图片位于文本前面。

答案 10 :(得分：5)

<style>
body {
     visibility:hidden
}
body .moz-signature p{
    visibility:visible
}
</style>

以上在最新的Thunderbird中运行良好。

答案 11 :(得分：5)

你为什么不用：

<li><a href="#">bla</a></li>

a {
    opacity: 0.0;
    font-size: 1px;
}

li {
    background-image: url('test.jpg');
}

如果您没有任何span或div元素，则它非常适用于链接。

答案 12 :(得分：4)

这实际上是一个讨论成熟的领域，有许多微妙的技术可供选择。选择/开发满足您需求的技术非常重要，包括：屏幕阅读器，图像/ css /脚本开/关组合，seo等。

以下是开始使用标准图像替换技术的一些好资源：

http://faq.css-standards.org/Image_Replacement

http://www.alistapart.com/articles/fir

http://veerle.duoh.com/blog/links/#l-10

答案 13 :(得分：4)

答案是用属性

创建一个span

{display:none;}

您可以在this site

找到示例

答案 14 :(得分：3)

对不同的浏览器使用Condition标记，并使用必须放置的CSS height:0px和width:0px您也必须放置font-size:0px。

答案 15 :(得分：2)

如果要点只是使元素内的文本不可见，请使用rgba值（例如color:rgba(0,0,0,0);清洁和简单）将颜色属性设置为0不透明度。

答案 16 :(得分：2)

您只需添加以下属性即可隐藏文本：

font size: 0 !important;

答案 17 :(得分：2)

尝试使用此代码缩短和隐藏文字

.hidetxt{

  width: 346px;
  display: table-caption;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: no-drop;
  
}

.hidetxt:hover { 

  visibility: hidden;
  
}
<div class="hidetxt">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when</p>
</div>

或隐藏在css类.hidetxt { visibility: hidden; }

中的使用

答案 18 :(得分：2)

使用CSS重新编写内容

 h1{  font-size: 0px;}
 h1:after {
    content: "new content";
    font-size: 15px;
  }

答案 19 :(得分：2)

h1 {
    text-indent: -3000px; 
    line-height: 3000px;
    background-image: url(/LOGO.png);
    height: 100px; width:  600px;  /* height and width are a must */

}

答案 20 :(得分：1)

我通常使用：

span.hide
{
  position:fixed;
  right:-5000px;
}

答案 21 :(得分：1)

我实现此目标的方法之一是使用:before或:after。我已经使用了这种方法已有好几年了，特别适用于字形矢量图标。

h1 {
    position: relative;
    text-indent: -9999px;                 /* sends the text off-screen */
    }
h1:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 600px;
    height: 100px;
    content: ' ';
    background: transparent url(/the_img.png) 0 0 no-repeat;
    }

答案 22 :(得分：1)

如果我们可以编辑标记，生活可以更容易，只需删除文本并快乐。但有时标记是由JS代码放置的，或者我们根本不允许编辑它，太糟糕的css变成了我们可以使用的唯一武器。

我们无法放置<span>包装文本并隐藏整个标记。顺便说一下，有些浏览器不仅隐藏了display:none的元素，还禁用了里面的组件。

font-size:0px和color:transparent都可能是很好的解决方案，但有些浏览器并不理解它们。我们不能依赖它们。

我建议：

h1 {
  background-image: url(/LOGO.png);  /* Our image */
  text-indent: -3000px;  /* Send text out of viewable area */
  height: 100px; width: 600px;  /* height and width are a must, agree */
  overflow:hidden;  /* make sure our size is respected */
}

使用overflow:hidden强制我们的宽度＆amp;高度。某些浏览器（不会将它们命名为 IE ）可能会将宽度和高度读为min-width和min-height。我想防止盒子被放大。

答案 23 :(得分：1)

在元素中为font-size和line-height使用零值对我来说很有用：

<style>
    .text {
        display: block;
        width: 200px;
        height: 200px;

        font-size: 0;
        line-height: 0;
    }
</style>

<span class="text">
    Invisible Text
</span>

答案 24 :(得分：1)

隐藏html中的文本使用css中的text-indent属性

.classname {
 text-indent: -9999px;
 white-space: nowrap; 
}

/ *对于动态文本，您需要添加空格，因此您应用的css不会打扰。 nowrap表示文本永远不会换行到下一行，文本会在同一行继续，直到遇到<br>标记

答案 25 :(得分：1)

我不记得我选择了哪一个，但已成功使用它多年。

  =hide-text()
    font: 0/0 a
    text-shadow: none
    color: transparent

我的mixin是sass然而你可以任何你认为合适的方式使用它。为了更好地衡量，我通常会在项目的某处保留一个.hidden类来附加元素以避免重复。

答案 26 :(得分：0)

内容替换可通过使用 content 属性直接在 CSS 中使用。

这似乎最常用于生成 ::before 和 ::after 伪元素，但也可用于替换现有 HTML 元素的内容。

对于原始示例

<h1>My Website Title Here</h1>

这是将文本替换为徽标的 CSS：

        h1 {
            content: url(mywebsitelogo.png);
            width: 100%;
        }

虽然在伪元素中，任何图像内容都不能调整大小（除非将其用作背景图像），但替换内容不是这种情况。

默认情况下，图像将以其实际大小显示，必要时扩展容器，就像它包含实际的 <img> 元素一样。

在本例中，width: 100% 用于使徽标图像适合全宽。如果图像应该缩小以适应（如果需要），但在容器大于图像时永远不会扩展，则可以使用 max-width: 100% 代替。

According to MDN，唯一一个不支持 CSS 内容替换的常规浏览器是 Internet Explorer。

答案 27 :(得分：0)

适用于我的解决方案：

HTML 

<div class="website_title"><span>My Website Title Here</span></div>

CSS 

.website_title {
    background-image: url('../images/home.png');
    background-repeat: no-repeat;
    height: 18px;
    width: 16px;
}

.website_title span {
    visibility: hidden;
}

答案 28 :(得分：0)

这对我来说很有效（敲门验证）。

<span class="validationMessage">This field is required.</span>

.validationMessage {
    background-image: url('images/exclamation.png');
    background-repeat: no-repeat;
    margin-left: 5px;
    width: 16px;
    height: 16px;
    vertical-align: top;

    /* Hide the text. */
    display: inline-block;
    overflow: hidden;
    font-size: 0px;
}

答案 29 :(得分：-1)

h1{
   background:url("../images/logo.png") no-repeat;
   height:180px;
   width:200px;
   display:inline-block;
   font-size:0px !important;
   text-intent:-9999999px !important;
   color:transparent !important;
 }

答案 30 :(得分：-1)

最佳答案适用于短文本，但如果文本包装它只是显示在图像中。

一种方法是使用jquery处理程序捕获错误。尝试加载图像，如果失败则会抛出错误。

$('#logo img').error(function(){
    $('#logo').html('<h1>My Website Title Here</h1>');
});

请参阅SAMPLE CODE

相关问题
最新问题