hiding text using “text-indent”

Question

I\'m trying to hide some text inside an

element using CSS by setting text-indent: -999px;.
For some reason this doesn\'t work when I set

Answer 1

My problem was with text-align. In case you modify align mode of the element or parent element(s) wrapping it to left, you must give a negative index for text-indent. Otherwise you must give a positive value.

.case1{text-indent:-999px;text-align:left;overflow:hidden;display:block}

Otherwise

.case2{text-indent:999px;text-align:right;overflow:hidden;display:block}

Answer 2

color: transparent;

or

font-size:0px;

Answer 3

You can use line-height specifying a large value, say 100px for a 30px high container.

only works if your container is limited in size. you may have to specifically set height if it isn't yet.

Answer 4

I prefer this solution:

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

Answer 5

I found the best way is to make the text a transparent color:

color: rgba(0,0,0,0);

Note: This bug still exists in firefox 12 (text-indent value is ignored on rtl)

Answer 6

The text-indent: -99px is an old trick, which is not the optimal way to hide text. Why not use visibility:hidden instead?