14

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?

j0k
  • 22,600
  • 28
  • 79
  • 90
Crippletoe
  • 395
  • 2
  • 6
  • 16
  • Note: I believe that that does not work in IE6. + http://www.456bereastreet.com/archive/200510/google_seo_and_using_css_to_hide_text/ – aviraldg May 08 '10 at 15:45
  • you could you padding / overflow: hidden to hide your content, this works in every browser and any text direction. like this: ´width:0; height:0; padding: 400px 0 0 200px; overflow: hidden ´ – meo May 08 '10 at 15:57
  • if you don't get a good solution, you can always try other text hiding techniques :D http://css-tricks.com/css-image-replacement/ – Gordon Gustafson May 08 '10 at 16:52
  • Have you tried a positive `text-indent`? – James Inman May 09 '10 at 17:39
  • i have tried a positive indent. it makes sense that it should work but it doesnt. – Crippletoe May 23 '10 at 09:43

11 Answers11

20

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;.

kaustavdm
  • 405
  • 4
  • 11
12

What about setting direction:ltr on the elements you're trying to give negative text-indent?

Demo: jsfiddle.net/Marcel/aJBnN/1/

Marcel
  • 27,922
  • 9
  • 70
  • 85
  • +1 that's the right answer - works and only changes a property that's irrelevant (since the text gets hidden) – ori Jan 07 '13 at 18:33
4

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}
HasanG
  • 12,734
  • 29
  • 100
  • 154
2

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)

George Filippakos
  • 16,359
  • 15
  • 81
  • 92
2
color: transparent;

or

font-size:0px;
Holy Moses
  • 65
  • 7
2

I prefer this solution:

.hide_text { text-indent: 100%; white-space: nowrap; overflow: hidden; }
Jazi
  • 6,569
  • 13
  • 60
  • 92
2

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.

dizarter
  • 448
  • 1
  • 8
  • 21
1

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.

Andrezero
  • 11
  • 1
0

text-align: right; works for me

Ahmad Ajmi
  • 7,007
  • 3
  • 32
  • 52
0

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

Tomer Cohen
  • 374
  • 6
  • 13
  • 7
    Presumably this is an attempt to use a **background** image as content and provide real text for screen readers instead of using an `` element with an `alt` attribute. – Quentin May 15 '10 at 23:18
  • 2
    i cannot use visibility:hidden because i just need the text to go away. not the whole element in which the text is placed. any solution? – Crippletoe May 16 '10 at 10:47
0

Add overflow hidden then it will work fine.

div{
    text-indent: 100%;
    overflow: hidden;
}
<div>
 search
 <input type="text">
 </div>
Ajeet
  • 286
  • 2
  • 5