使用css隐藏文本

答案是使用该属性创建一个span

{display:none;}

你可以在这个网站找到一个例子

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

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

然后使用CSS隐藏跨度和替换图像

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

如果你可以使用CSS2，那么有一些更好的方法使用content属性，但不幸的是，web还没有100%。

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

这是一种方法:

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 */
}

下面是另一种方式来隐藏文本，同时避免浏览器将创建的巨大的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;
}

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

这里有一些很好的资源，让你开始使用标准化图像替换技术:

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

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

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

参见mezzoblue对每种技术进行了很好的总结，包括优点和缺点，以及html和css示例。

不要使用{ display:none; }它使内容不可访问。您希望屏幕阅读器看到您的内容，并通过将文本替换为图像(如徽标)来视觉化它。通过使用text-indent: -999px;或类似的方法，文本仍然在那里——只是在视觉上不存在。使用display:none，文本就消失了。

只需将font-size: 0;添加到包含文本的元素中。

.hidden { font-size: 0; }

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

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

以上在最新的雷鸟也工作得很好。

为什么不简单地使用:

h1 { color: transparent; }

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


}

如果我们可以编辑标记，生活就会更简单，只需要删除文本就可以了。但有时标记是由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强制我们的width &高度。一些浏览器(不会命名它们…)即)可以将width和height读为min-width和min-height。我想防止箱子变大。

我通常使用:

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

使用条件标签为不同的浏览器和使用css你必须放置 height:0px和width:0px你还必须放置font-size:0px

为什么不用:

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


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


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

如果你没有任何span或div元素，它可以完美地用于链接。

这对我来说适用于span(敲除验证)。

<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;
}

如果目的只是让元素内的文本不可见，则使用rgba值(例如color:rgba(0,0,0,0);)将color属性设置为不透明度为0。

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/

最好的答案适用于短文本，但如果文本换行，它只会显示在图像中。

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

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

看到示例代码

一个对我有效的解决方案:

超文本标记语言

<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;
}

隐藏文本与可访问性:

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

此方法有效地隐藏了文本，但允许它对屏幕阅读器保持可见。如果需要考虑可访问性，可以考虑这个选项。

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

值得指出的是，这个类目前在引导3中使用。

如果你对无障碍阅读感兴趣:

• Web可访问性倡议(WAI)

• MDN可访问性文档

试试这段代码来缩短和隐藏文本

.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; }中隐藏使用

在元素中为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>

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

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

/*对于动态文本，您需要添加空白，这样您应用的CSS将不会打扰。nowrap意味着文本永远不会换行到下一行，文本会继续在同一行上，直到遇到<br>标记

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;
}

有这么多复杂的解决方案。

最简单的使用方法是:

color:rgba(0,0,0,0)

我不记得我是在哪里学会的，但我已经成功地使用它很多年了。

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

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

用CSS替换内容

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

实现这一点的方法之一是使用: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;
}

你可以通过添加这个属性来隐藏你的文本:

font-size: 0 !important;

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

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

对于最初的示例

<h1>My Website Title Here</h1>

这个CSS将用logo替换文本:

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

而在伪元素中，任何图像内容都不能调整大小(除非将其用作背景图像)，这是不替换内容的情况。

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

在本例中，width: 100%用于将logo图像调整为全宽度。如果需要缩小图像，但如果容器比图像大，则从不展开，则可以使用max-width: 100%代替。

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