hiding text using “text-indent”

Question

I'm trying to hide some text inside an <li> element using CSS by setting text-indent: -999px;.
For some reason this doesn't work when I set the direction of the document to "rtl" (right to left - my site is in Hebrew).
When direction is "rtl" the text still shows...
Anyone knows why, and a way around this?

Answer 1

Try setting text-alignment to match the direction in which you are indenting text.

For example, if you use LTR and want to indent text negatively, besides adding display: block, you should also add left alignment.

Not sure for RTL, but seems logical you should indent it positively and use right alignment.

Answer 2

color: transparent;

or

font-size:0px;

Answer 3

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

Answer 4

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.