text-indent不能与锚标记一起使用 [英] text-indent doesn't work with anchor tag

问题描述

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

我正在使用：

 < a href => Lorem ipsum dolor。 < / a> 
  

css：

 code> a {text-indent：-9999px;} 
  

...不工作。当我用另一个标签，例如< p> ，它的工作原理。

在css中添加 overflow：hidden ，但它仍然不工作。我认为这个css属性有一个概念错误。

解决方案

由于其他答案建议你只能应用 text-indent：-9999px 到块元素。您可以使用 display：inline-block 或 display：block;
$ b

我还建议使用

  text-indent：100％; 
 white-space：nowrap; 
 overflow：hidden; 
  

而不是 text-indent：-9999px; 因为-9999px强制浏览器创建一个9999px的屏幕。在此处详细了解此hack： http：// www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

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

I'm using:

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

css:

a{text-indent:-9999px;}

...but this doesn't work. When I do it with another tag, for example <p>, it works.

I also try to add overflow:hidden in the css but it still doesn't work. I think that I have a concept error with this css property.

解决方案

As the other answers suggest you can only apply text-indent: -9999px to a block element. You can use display: inline-block or display: block; and it will work.

I would also suggest using

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

Instead of text-indent: -9999px; since -9999px forces the browser to create a 9999px box offscreen. Learn more about this "hack" here: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

这篇关于text-indent不能与锚标记一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！