logo标签列表

使用"text-indent"隐藏文本

cssright-to-lefttext-indent
14

我正在试图使用CSS将一些文本隐藏在一个

  • 元素中，方法是设置text-indent: -999px;。
    但是当我将文档的方向设置为"rtl"（从右到左 - 我的网站是用希伯来语编写的）时，这种方法不起作用。
    当方向为"rtl"时，文本仍然显示...
    有人知道原因，并且有解决方法吗？

    • 注意：我相信这在IE6中不起作用。+ http://www.456bereastreet.com/archive/200510/google_seo_and_using_css_to_hide_text/ - aviraldg
    你可以使用padding / overflow: hidden来隐藏你的内容，这在任何浏览器和任何文本方向下都有效。像这样：´width:0; height:0; padding: 400px 0 0 200px; overflow: hidden ´ - meo
    如果您没有得到一个好的解决方案，您总是可以尝试其他文本隐藏技术:D http://css-tricks.com/css-image-replacement/ - Gordon Gustafson
    你尝试过使用正数的 text-indent 吗？ - James Inman
    我尝试了正向缩进。理论上它应该可以工作，但实际上并没有。 - Crippletoe
    11个回答
    20

    除了使用 text-indent: -9999px，还可以尝试使用 display: block;。这样对我来说解决了问题。

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

    12

    如果您想给元素设置负的text-indent，可以考虑在该元素上设置direction:ltr属性。

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

    +1 这是正确的答案 - 可以工作，而且只更改一个不相关的属性（因为文本被隐藏）。 - ori
    4

    我的问题在于文本对齐。如果你修改了元素或其父元素的对齐模式为左对齐，则必须为text-indent给定负索引。否则，您必须给出正值。

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

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

    我更喜欢这个解决方案：

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

    或者

    font-size:0px;
    2

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

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

    注意：这个bug在Firefox 12中仍然存在（rtl上text-indent值被忽略）

    2
    尝试将文本对齐方式设置为与缩进文本的方向相匹配。
    例如，如果您使用LTR并希望负向缩进文本，则除了添加display：block之外，还应该添加左对齐。
    对于RTL，不确定，但似乎逻辑上应该进行正向缩进并使用右对齐。
    1

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

    只有在容器大小受限时才有效。如果尚未限制容器大小，则可能需要明确设置高度。

    0

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

    7
    这大概是想要将背景图片作为内容并提供真实文本给屏幕阅读器，而不是使用带有“alt”属性的<img>元素。 - Quentin
    2
    我不能使用visibility:hidden，因为我只需要文本消失，而不是包含文本的整个元素。有什么解决方案吗？ - Crippletoe
    0

    text-align: right; 对我有效

    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接