使用 css 隐藏文本

Posted 2023-03-05

技术标签:

【中文标题】使用 css 隐藏文本【英文标题】：Hide text using css 【发布时间】：2010-10-03 01:25:09 【问题描述】：

我的 html 中有这样的标签：

<h1>My Website Title Here</h1>

使用 css 我想用我的实际徽标替换文本。通过调整标签大小并通过css放入背景图像，我已经获得了徽标没有问题。但是，我不知道如何摆脱文本。我以前基本上是通过将文本从屏幕上推开来完成的。问题是我不记得我在哪里看到的。

【问题讨论】：

这里有很多过时的答案：考虑支持更新的答案***.com/a/27769435/2586761 以公开它 【参考方案1】：

使用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。

【讨论】：

【参考方案2】：

你可以简单地通过添加这个属性来隐藏你的文本：

font-size: 0 !important;

【讨论】：

在你的情况下是否真的需要 !important 子句也是值得的。就我而言，没有它也可以正常工作。【参考方案3】：

我实现此目的的方法之一是使用: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;

【讨论】：

【参考方案4】：

用 CSS 替换内容

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

【讨论】：

【参考方案5】：

我不记得我是在哪里捡到这个的，但已经成功使用了好几年了。

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

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

【讨论】：

我想我在某处读到过这个版本更受欢迎，因为负文本缩进会导致浏览器呈现一个 10000 像素（或您使用的任何示例）的长框。像本例那样更改字体不会导致浏览器创建一个它尝试呈现的大框。【参考方案6】：

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

.hidden  font-size: 0;

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

【讨论】：

这正是我所需要的。我想隐藏 div 中的内容，但显示子 span 中的内容（隐藏它们之间的标点符号）。这似乎是最合乎逻辑的（阅读：Least Bizarre）方法——但是，我想知道它在各种浏览器中的支持程度如何？（我可以确认它在 Firefox 中有效。）在比IE7更多的浏览器中仍然显示文本非常小，这不是一个完整的跨浏览器解决方案。我已经在 Chrome 27、Firefox 17、Safari for windows 5.1.7、Opera 12.12、IE8、IE9、IE10 中测试了 font-size:0 技巧 - 它适用于所有这些浏览器。如果您不能在元素本身上设置背景图像（例如，因为您使用的是紧凑的精灵图像并且所需的图标周围没有足够的空白填充）并且必须使用伪选择器，则此技巧是最好的，例如element:after 显示背景图片。这样也会改变div的大小，所以不推荐这样做。【参考方案7】：

这么多复杂的解决方案。

最简单的就是简单地使用：

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

【讨论】：

太棒了！这适用于任何背景颜色。谢谢。选中后可见。【参考方案8】：

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;

【讨论】：

虽然此代码可能会回答问题，但提供有关 why 和/或如何此代码回答问题的附加上下文可提高其长期价值.【参考方案9】：

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

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

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

【讨论】：

【参考方案10】：

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

【讨论】：

【参考方案11】：

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

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

然后使用CSS隐藏span并替换图片

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

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

【讨论】：

但请务必将宽度和高度属性设置为图像的属性 - 并确保设置了“填充”和“边距”，因为浏览器对于填充/边距的大小有不同的想法H1标签需要有。这里的缺点是如果图像被关闭，或者如果出现了一个 css 感知机器人，标题将不可见。显示中的重要文本 none 可能会被搜索引擎机器人和屏幕阅读器遗漏。改为使用文本缩进。这不会做任何事情，OP还不如删除标题中的文字。屏幕阅读器不显示任何内容..【参考方案12】：

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

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

【讨论】：

【参考方案13】：

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

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

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

见SAMPLE CODE

【讨论】：

【参考方案14】：

考虑到可访问性隐藏文本：

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

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

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

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

如果您有兴趣阅读有关可访问性的内容：

Web Accessibility Initiative (WAI)

MDN Accessibility documentation

【讨论】：

bs4 和 h5bp 的来源：github.com/h5bp/html5-boilerplate/blob/master/src/css/…, github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/… 这对于添加元素非常有效，只是屏幕阅读器；但是，它不适用于原始问题，其中图像将由 css 中指定的背景图像显示。 @vossad01 - 如果你不能添加另一个元素，并且你被一个元素困住（就像你提到的情况一样），那么一个好的解决方法是使用pseudo-element ...另外，我在提出第一个问题 6 年后发布了这个答案，我的答案旨在针对更广泛的受众，因为这个问题似乎很受欢迎。【参考方案15】：

适合我的解决方案：

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;

【讨论】：

【参考方案16】：

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/

【讨论】：

【参考方案17】：

你为什么不使用：

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

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


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

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

【讨论】：

【参考方案18】：

如果只是为了让元素内的文本不可见，请使用 rgba 值（例如color:rgba(0,0,0,0); clean and simple）将颜色属性设置为不透明度为 0。

【讨论】：

【参考方案19】：

这对我来说适用于跨度（敲除验证）。

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

【讨论】：

【参考方案20】：

您可以使用 css background-image 属性和 z-index 来确保图像保持在文本前面。

【讨论】：

例子？我看不出z-index 如何应用于background-image。【参考方案21】：

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

【讨论】：

【参考方案22】：

这是一种方式：

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;

【讨论】：

长标题使用此方法会有问题，因为只有自动换行之前的文本会缩进，而 W3C 规范没有指定负缩进的情况，因此可能会产生不可预知的结果如果你使用这种方法，你应该添加“溢出：隐藏”以防止seird选择框向左射击（尤其是链接）如果元素中有任何带有负文本缩进的链接，请确保同时指定“outline: none”，否则屏幕左侧会出现虚线边框。我更喜欢使用 'text-indent: -9999px;'只是为了确保文本离屏幕很远。有点防御性偏执狂。如果您的文本很长，并且只有第一行缩进，为了安全起见，还要添加 'white-space: nowrap'。【参考方案23】：

如果我们可以编辑标记，生活会更轻松，只需删除文本并快乐。但有时标记是由 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 强制我们的宽度和高度。某些浏览器（不会命名它们...IE）可能会将宽度和高度读取为min-width 和min-height。我想防止框被放大。

【讨论】：

【参考方案24】：

为不同的浏览器使用 Condition 标签并使用你必须放置的 css height:0px 和 width:0px 也必须放置 font-size:0px。

【讨论】：

【参考方案25】：

我通常使用：

span.hide

  position:fixed;
  right:-5000px;

【讨论】：

【参考方案26】：

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

【讨论】：

为什么会有行高？【参考方案27】：

为什么不简单地使用：

h1  color: transparent;

【讨论】：

为什么不呢？因为谷歌不喜欢它。验证 (CSS 2.1)：“透明”不是“颜色”属性的有效值。如果用户选择了文本（STRG+A 等），文本将变得可见——这看起来很不专业！问候克里斯托弗 @HasanGürsoy 和未来的谷歌员工-“CSS3 扩展了颜色值以包含‘透明’关键字......” color: transparent; 与 user-select: none; 一起使用，除非您覆盖颜色。【参考方案28】：

<style>
body 
     visibility:hidden

body .moz-signature p
    visibility:visible

</style>

上述方法在最新的 Thunderbird 中也很有效。

【讨论】：

请注意，使用此方法会使大多数屏幕阅读器无法阅读文本——请参阅***.com/questions/1755656/…【参考方案29】：

请参阅mezzoblue 了解每种技术的精彩总结，包括优势和劣势，以及示例 html 和 css。

【讨论】：

【参考方案30】：

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

这里有一些很好的资源可以帮助你开始使用标准图像替换技术：

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

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

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

【讨论】：

以上是关于使用 css 隐藏文本的主要内容，如果未能解决你的问题，请参考以下文章

打印页面时如何使用CSS隐藏文本[重复]

CSS 隐藏 INPUT BUTTON 值文本