CSS 使用“文本缩进”隐藏文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2794656/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
hiding text using "text-indent"
提问by Crippletoe
I'm trying to hide some text inside an <li>element using CSS by setting text-indent: -999px;.
For some reason this doesn't work when I set the direction of the document to "rtl"(right to left - my site is in Hebrew).
When direction is "rtl" the text still shows...
Anyone knows why, and a way around this?
我试图<li>通过设置 .css 来使用 CSS在元素中隐藏一些文本text-indent: -999px;。
出于某种原因，当我将文档的方向设置为"rtl"（从右到左 - 我的网站是希伯来语）时，这不起作用。
当方向是“rtl”时，文本仍然显示......
有人知道为什么，以及解决这个问题的方法吗？
回答by kaustavdm
Along with text-indent: -9999pxtry using display: block;. It solved for me.
随着text-indent: -9999px尝试使用display: block;. 它为我解决了。
Additionally, if you need the li elements to float horizontally (e.g. a horizontal menu), use float: left;.
此外，如果您需要 li 元素水平浮动（例如水平菜单），请使用float: left;.
回答by Marcel
What about setting direction:ltron the elements you're trying to give negative text-indent?
设置direction:ltr你试图给负的元素怎么样text-indent？
回答by HasanG
My problem was with text-align. In case you modify align mode of the element or parent element(s) wrapping it to left, you must give a negative index for text-indent. Otherwise you must give a positive value.
我的问题是文本对齐。如果您修改元素的对齐模式或将其向左包装的父元素，则必须为 text-indent 提供负索引。否则，您必须给出一个正值。
.case1{text-indent:-999px;text-align:left;overflow:hidden;display:block}
Otherwise
除此以外
.case2{text-indent:999px;text-align:right;overflow:hidden;display:block}
回答by Holy Moses
color: transparent;
or
或者
font-size:0px;
回答by dizarter
Try setting text-alignment to match the direction in which you are indenting text.
尝试设置 text-alignment 以匹配您缩进文本的方向。
For example, if you use LTR and want to indent text negatively, besides adding display: block, you should also add left alignment.
例如，如果您使用 LTR 并希望对文本进行负缩进，那么除了添加 display: 块之外，您还应该添加左对齐。
Not sure for RTL, but seems logical you should indent it positively and use right alignment.
不确定 RTL，但似乎合乎逻辑，您应该积极地缩进它并使用正确的对齐方式。
回答by George Filippakos
I found the best way is to make the text a transparent color:
我发现最好的方法是将文本设为透明颜色：
color: rgba(0,0,0,0);
颜色：RGBA（0,0,0,0）；
Note: This bug still exists in firefox 12 (text-indent value is ignored on rtl)
注意：这个bug在firefox 12中仍然存在（rtl上的text-indent值被忽略）
回答by Andrezero
You can use line-height specifying a large value, say 100px for a 30px high container.
您可以使用 line-height 指定一个较大的值，例如 100px 表示 30px 高的容器。
only works if your container is limited in size. you may have to specifically set height if it isn't yet.
仅当您的容器大小有限时才有效。如果还没有，您可能需要专门设置高度。
回答by Krzysztof Trzos
I prefer this solution:
我更喜欢这个解决方案：
.hide_text { text-indent: 100%; white-space: nowrap; overflow: hidden; }
回答by Tomer Cohen
The text-indent: -99pxis an old trick, which is not the optimal way to hide text. Why not use visibility:hiddeninstead?
这text-indent: -99px是一个古老的技巧，这不是隐藏文本的最佳方式。为什么不visibility:hidden改用？
回答by Ahmad Ajmi
text-align: right; works for me
文本对齐：右；为我工作
