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

【问题标题】：hiding text using "text-indent"使用“文本缩进”隐藏文本
【发布时间】：2011-02-17 04:32:33
【问题描述】：

我正在尝试通过设置 text-indent: -999px; 来使用 CSS 隐藏 <li> 元素内的一些文本。
由于某种原因，当我将文档的方向设置为 "rtl"（从右到左 - 我的网站是希伯来语）时，这不起作用。
当方向为“rtl”时，文本仍会显示...
任何人都知道为什么，以及解决这个问题的方法吗？

【问题讨论】：

注意：我相信这在 IE6 中不起作用。 + 456bereastreet.com/archive/200510/…
您可以填充/溢出：隐藏以隐藏您的内容，这适用于每个浏览器和任何文本方向。像这样：'宽度：0;高度：0；填充：400px 0 0 200px；溢出：隐藏´
如果您没有得到好的解决方案，您可以随时尝试其他文本隐藏技术：D css-tricks.com/css-image-replacement
你试过正面的text-indent吗？
我尝试了正缩进。它应该起作用但它不起作用是有道理的。

标签： css right-to-left text-indent

【解决方案1】：

添加溢出隐藏然后它会正常工作。

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

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

【讨论】：

【解决方案2】：

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

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

否则

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

【讨论】：

【解决方案3】：

我更喜欢这个解决方案：

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

【讨论】：

【解决方案4】：

color: transparent;

或

font-size:0px;

【讨论】：

【解决方案5】：

文本对齐：右；为我工作

【讨论】：

【解决方案6】：

我发现最好的办法是让文字变成透明色：

颜色：rgba(0,0,0,0);

注意：这个 bug 在 firefox 12 中仍然存在（文本缩进值在 rtl 上被忽略）

【讨论】：

【解决方案7】：

尝试设置 text-alignment 以匹配您缩进文本的方向。

例如，如果你使用 LTR 并且想要对文本进行负缩进，除了添加 display: 块外，还应该添加左对齐。

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

【讨论】：

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

在你试图给出否定text-indent的元素上设置direction:ltr怎么样？

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

【讨论】：

+1 是正确的答案 - 有效并且只更改不相关的属性（因为文本被隐藏）

【解决方案10】：

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

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

【讨论】：

【解决方案11】：

text-indent: -99px 是一个老把戏，它不是隐藏文本的最佳方式。为什么不改用visibility:hidden？

【讨论】：

大概这是尝试使用背景图像作为内容并为屏幕阅读器提供真实文本，而不是使用带有 alt 属性的 <img> 元素。
我不能使用可见性：隐藏，因为我只需要文本消失。不是放置文本的整个元素。有什么解决办法吗？