text-indent不适用于锚标记

Question

http://jsfiddle.net/corinem/TtPgy/

我正在使用：

<a href="">Lorem ipsum dolor.</a>

的CSS：

a{text-indent:-9999px;}

......但这不起作用。当我使用其他标记（例如<p>）时，它可以正常工作。

我也尝试在css中添加overflow:hidden，但它仍然不起作用。我认为这个css属性有一个概念错误。

Answer 1

正如其他答案所示，您只能将text-indent: -9999px应用于块元素。您可以使用display: inline-block或display: block;，它可以使用。

我还建议使用

text-indent: 100%;
white-space: nowrap;
overflow: hidden;

自-9999px以来强制浏览器在屏幕外创建一个9999px的框，而不是text-indent: -9999px;。在此处详细了解此“黑客”：http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

Answer 2

标签是块但是a是内联的，你必须写一个{text-indent：-9999px; display：inline-block;}

Answer 3

你只能用块项目来做。

使用：

p,a{
    text-indent: -9999px;
    display:block
}

或者您可以将a标记包装在一个块项中，然后将其设置为样式。

Answer 4

p{
color: red;
font-family: tahoma;
font-size: 12px;
line-height: 18px;
}

p+p{
font-family: tahoma;
text-indent: 20px;
color: red; 
font-size: 12px;
line-height: 18px;
}