为什么这种技术通常使用否定文本缩进？

Question

假设您想要用图像替换锚点，并将该图像作为锚点的背景。出于可访问性原因，您仍希望锚点包装的文本存在，但您不希望它可见。一种众所周知的技术是使用像text-indent这样的东西：-9999px;以及溢出：隐藏;

所以让我们说我们的锚箱是50px x 50px，为什么我们不做文字缩进：50px？这会将文本推入锚点的隐藏溢出，无论多长时间！

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

因为文本长度超过50px，所以它会包裹起来。只有第一行缩进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;
 }