Menu
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?
817
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.
visibility:hidden , color:transparent and text-indent will do this. the font-size:0 option will work better I think. It should be remembered that some of these solutions will only hide the text. They will still leave a space for it on the screen.
Definition and Usage The text-indent property specifies the indentation of the first line in a text-block. Note: Negative values are allowed. The first line will be indented to the left if the value is negative.
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;.
173
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
