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

问题描述：

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

注：我认为这并不在IE6工作。 + http://www.456bereastreet.com/archive/200510/google_seo_and_using_css_to_hide_text/ – aviraldg 2010-05-08 15:45:28

你可以填充/溢出：隐藏隐藏你的内容，这适用于每个浏览器和任何文本方向。像这样：'width：0;高度：0; padding：400px 0 0 200px;溢出：隐藏' – meo 2010-05-08 15:57:44

如果你没有得到一个好的解决方案，你总是可以尝试其他文字隐藏技术：D http://css-tricks.com/css-image-replacement/ – 2010-05-08 16:52:49

答

text-indent: -99px是一个古老的绝招，它不是隐藏文本的最佳方式。为什么不使用visibility:hidden呢？

大概这是尝试使用背景**图像作为内容，并为屏幕阅读器提供真实文本，而不是使用具有“alt”属性的''元素。 – Quentin 2010-05-15 23:18:12

我无法使用可见性：隐藏，因为我只需要文本消失。而不是放置文本的整个元素。任何解决方案？ – Crippletoe 2010-05-16 10:47:56

也，我在那里使用背景图像。很正确！ – Crippletoe 2010-05-16 10:48:51

答

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

仅适用于您的容器尺寸有限的情况。如果还没有，你可能不得不专门设置高度。

答

如何设置direction:ltr您试图给予否定的元素text-indent？

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

+1这是正确的答案 - 工作，只改变一个不相关的属性（因为文本被隐藏） – ori 2013-01-07 18:33:31

答

随着text-indent: -9999px尝试使用display: block;。它解决了我。

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

答

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

例如，如果您使用LTR并且想要负面缩进文本，除了添加display：block之外，还应该添加左对齐。

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

答

我发现最好的办法是让文本透明色：

颜色：RGBA（0,0,0,0）;

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

答

文本对齐：权利;对我的作品

答

color: transparent;

或

font-size:0px;

答

我喜欢这个解决方案：

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

答

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

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

否则

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

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

相关推荐