为什么这种技术通常使用负文本缩进？答案

【问题标题】：Why does this technique commonly use negative text-indent?为什么这种技术通常使用负文本缩进？
【发布时间】：2013-02-19 16:12:05
【问题描述】：

假设您想用图像替换锚点，并将该图像作为锚点的背景。出于可访问性的原因，您仍然希望由锚点包裹的文本存在，但您不希望它可见。一个众所周知的技术是使用类似 text-indent: -9999px;连同溢出：隐藏；

假设我们的锚框是 50px x 50px，我们为什么不直接做 text-indent: 50px 呢？这会将文本推入锚的隐藏溢出中，无论它得到多长时间！

【问题讨论】：

很确定overflow 是大多数元素的默认visible？
过去有一些奇怪的怪癖，像这样的东西只有在您将其放置在左侧时才有效，但在向右移动时会可见。因此是负数。我记得在 IE5（不寒而栗）或 IE6 中构建了一些东西，并意识到负数不仅仅是一种趋势，它们实际上是必要的。
@Graham 谢谢！这正是回答了我的疑惑。如果你回答正确，我会这样标记。
而文本缩进量如此之大的原因是你可以定义一个类（或Sass mixin等），然后将其应用于任何元素而无需考虑元素的尺寸和保证它可以工作，而不必知道尺寸（这可能取决于浏览器窗口的大小）。这是DRY 的事情。

标签： css text-indent

【解决方案1】：

好吧，让我们看看当你这样做时会发生什么

http://jsfiddle.net/C29Ma/

<div class="image">Hide me please</div>

div.image {
    width: 50px;
    height: 50px;
    background: url(http://placehold.it/50x50) no-repeat;
    text-indent: 50px;
}

因为文本的宽度超过 50 像素，所以会环绕。只有第一行缩进 50px。

负缩进技术出现在对伪元素或控制自动换行的广泛支持之前。它可以很好地完成这项工作，因此当出现更新/更好的方法时，人们不会改变他们做事的方式。

不过，您的建议非常接近现代技术之一

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

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

【讨论】：

好吧，很奇怪。我确信我已经做到了并且它有效，但我想我可能在文本中没有任何中断空格。感谢您的回答！
就我个人而言，我更喜欢这种技术，因为它可以在图像不可用的情况下工作：nicolasgallagher.com/css-image-replacement-with-pseudo-elements
@ryanve 如果你有不同的问题，你应该问一个新问题。
@ryanve 我不知道你为什么要告诉我，我不会回答的。