Скрывая текст с помощью "text-indent"

Я пытаюсь скрыть текст внутри элемента <li> с помощью CSS, установив text-indent: -999px;.
По какой-то причине это не работает, когда я устанавливаю направление документа на "rtl" (справа налево - мой сайт находится на иврите).
Когда направление "rtl", текст по-прежнему отображается...
Кто-нибудь знает, почему и как это сделать?

Ответ 1

Наряду с text-indent: -9999px попробуйте использовать display: block;. Он решил для меня.

Кроме того, если вам нужно, чтобы элементы li плавали горизонтально (например, горизонтальное меню), используйте float: left;.

Ответ 2

Как насчет установки direction:ltr на элементы, которые вы пытаетесь дать отрицательный text-indent?

Демо: jsfiddle.net/Marcel/aJBnN/1/

Ответ 3

Попробуйте установить выравнивание текста в соответствии с направлением, в котором вы отступаете текст.

Например, если вы используете LTR и хотите отступать текст отрицательно, помимо добавления display: block, вы также должны добавить выравнивание по левому краю.

Не уверен в RTL, но кажется логичным, что вы должны отступать от него положительно и использовать правильное выравнивание.

Ответ 4

Я нашел лучший способ сделать текст прозрачным цветом:

цвет: rgba (0,0,0,0);

Примечание: Эта ошибка по-прежнему существует в firefox 12 (значение text-indent игнорируется на rtl)

Ответ 5

color: transparent;

или

font-size:0px;

Ответ 6

Вы можете использовать высоту строки, определяющую большое значение, например, 100px для контейнера высотой 30px.

работает только в том случае, если ваш контейнер ограничен по размеру. вам может потребоваться установить высоту, если она еще не установлена.

Ответ 7

Я предпочитаю это решение:

.hide_text { text-indent: 100%; white-space: nowrap; overflow: hidden; }

Ответ 8

Моя проблема заключалась в выравнивании текста. Если вы измените режим выравнивания элемента или родительского элемента (ов), обернув его влево, вы должны указать отрицательный индекс для текстового отступа. В противном случае вы должны дать положительное значение.

.case1{text-indent:-999px;text-align:left;overflow:hidden;display:block}

В противном случае

.case2{text-indent:999px;text-align:right;overflow:hidden;display:block}

Ответ 9

text-indent: -99px - это старый трюк, который не является оптимальным способом скрыть текст. Почему бы не использовать visibility:hidden вместо этого?

Ответ 10

text-align: right; работает для меня