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?
Along with text-indent: -9999px try using display: block;. It solved for me.
Additionally, if you need the li elements to float horizontally (e.g. a horizontal menu), use float: left;.
What about setting direction:ltr on the elements you're trying to give negative text-indent?
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}
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.
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)
color: transparent;
or
font-size:0px;
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.
I prefer this solution:
.hide_text { text-indent: 100%; white-space: nowrap; overflow: hidden; }
The text-indent: -99px is an old trick, which is not the optimal way to hide text. Why not use visibility:hidden instead?
text-align: right; works for me
来源：https://stackoverflow.com/questions/2794656/hiding-text-using-text-indent