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

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

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

Answer 2

text-align: right; works for me

Answer 3

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

Answer 4

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 5

Add overflow hidden then it will work fine.

div{
    text-indent: 100%;
    overflow: hidden;
}

<div>
 search
 <input type="text">
 </div>