使用“文本缩进”隐藏文本

Question

我试图通过设置 text-indent: -999px; 使用 CSS 隐藏

元素内的一些文本。
由于某种原因，当我将文档的方向设置为“rtl”（从右到左 - 我的网站是希伯来语）时，这不起作用。
当方向为“rtl”时，文本仍然显示...
有人知道为什么，以及解决这个问题的方法吗？

Answer 1

与 text-indent: -9999px 一起尝试使用 display: block;。它为我解决了。

此外，如果您需要 li 元素水平浮动（例如水平菜单），请使用 float: left;。

Answer 2

在您尝试提供负 text-indent 的元素上设置 direction:ltr 怎么样？

演示： jsfiddle.net/Marcel/aJBnN/1/

Answer 3

我的问题是文本对齐。如果您修改元素或将其向左包裹的父元素的对齐模式，则必须为文本缩进提供负索引。否则你必须给出一个正值。

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

否则

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

Answer 4

尝试设置文本对齐方式以匹配文本缩进的方向。

例如，如果您使用LTR并希望负缩进文本，除了添加display:块之外，还应该添加左对齐。

不确定 RTL，但似乎合乎逻辑，您应该积极缩进并使用右对齐。

Answer 5

我发现最好的方法是将文本设置为透明颜色：

color: rgba(0,0,0,0);

注意：
此错误在 Firefox 12 中仍然存在（在 RTL 上忽略文本缩进值）

Answer 6

color: transparent;

或者

font-size:0px;

Answer 7

我更喜欢这个解决方案：

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

Answer 8

您可以使用 line-height 指定一个较大的值，例如 30 像素高的容器为 100 像素。

仅当您的容器尺寸有限时才有效。如果还没有，您可能需要专门设置高度。

Answer 9

text-indent: -99px 是一个老把戏，这不是隐藏文本的最佳方式。为什么不使用 visibility:hidden 来代替呢？

Answer 10

文本对齐：右对齐；为我工作

Answer 11

添加溢出隐藏然后它就可以正常工作了。

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

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