Question

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

Answer 1

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

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

Answer 2

如果要对您尝试给予否定direction:ltr的元素设置text-indent呢？

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

Answer 3

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

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

对RTL不确定，但似乎合乎逻辑，你应该积极缩进并使用正确的对齐方式。

Answer 4

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

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

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

Answer 5

color: transparent;

或

font-size:0px;

Answer 6

我的问题是text-align。如果您修改元素的父对齐模式或将其包装到左侧的父元素，则必须为text-indent指定负索引。否则你必须给出正值。

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

否则

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

Answer 7

您可以使用行高指定一个较大的值，例如100px表示30px的高容器。

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

Answer 8

我更喜欢这个解决方案：

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

Answer 9

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

Answer 10

text-align：right;适合我

Answer 11

添加隐藏的溢出，它将正常工作。

module.exports = {
  async rewrites() {
    return [
                // Rewriting to an another app, running on different port
      {
        source: '/docs',
        destination: 'http://localhost:4040/docs',
      },
    ]
  },
}

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

使用“text-indent”隐藏文本

11 个答案: