使用CSS隐藏文本，最佳实践？ [英] Hide Text with CSS, Best Practice?

问题描述

假设我有这个元素显示网站标志：

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>

＃blog-title background：url（http://website.com/logohere.png），但如何正确隐藏文本网站名称？如下所示：使用css隐藏文本或此处 http://stackoverflow.com/a/2705328 ，我已经看过各种方法来隐藏文本，例如：

The #blog-title would 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 css or here http://stackoverflow.com/a/2705328 , I've seen various methods to hide the text, such as:

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

或

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

或

#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?

推荐答案

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

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

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

可以访问，性能优于-99999px。

It is accessible, an has better performance than -99999px.

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

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.

这篇关于使用CSS隐藏文本，最佳实践？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！