css - 文本对齐时文本缩进不起作用：右

Question

今天我遇到了用text-indent: -9999px规则隐藏文本的问题。我意识到这是由某些具有text-align: right. jsfiddle 上的示例。 设置text-indent为正值9999px也不起作用。

我设法通过将文本设置为 来隐藏文本text-align，left但我不明白为什么会出现这样的问题。

有人可以解释为什么设置为text-indenting时不起作用？text-alignright

摆弄 ids：http: //jsfiddle.net/sNbfv/2/

Answer 1

似乎保持对齐对浏览器来说更重要，所以无论如何，文本的右边缘都保持在右侧。

文档设置为ltr方向，因此缩进应用于行的左侧，但由于您已经说过希望它与右侧对齐，所以浏览器完全忽略缩进。我没有解释为什么会发生这种情况，除了早期的浏览器设置了理由重要性的优先级。CSS 规范中没有text-align明确忽略text-indent.

该框相对于行框的左（或右，对于从右到左的布局）边缘缩进。用户代理必须将此缩进呈现为空白。

http://www.w3.org/TR/CSS2/text.html#propdef-text-indent

如果我们将小提琴更新为有rtl方向，缩进确实会影响文本的右侧。我添加了一个边框来显示溢出正在发生。

http://jsfiddle.net/sNbfv/3/

.rtl{direction:rtl;}
.parent { text-align: right; border:1px solid blue}
.indented { text-indent: -9999px; }

<div class="rtl">
    <div class="parent">
        <div class="indented">
            Lorem ipsum ipsum!
        </div>
    </div>

    <div class="indented">
        Cupcake ipsum!
    </div>
</div>

---

简单的解决方案似乎是对齐嵌套的 indent to text-align:left。

http://jsfiddle.net/sNbfv/4/

.parent { text-align: right; border:1px solid blue}
.indented { text-indent: -9999px; }
.parent .indented{ text-align:left; }

<div class="parent">
    <div class="indented">
        Lorem ipsum ipsum!
    </div>
</div>

<div class="indented">
    Cupcake ipsum!
</div>

Answer 2

CSS 3 规格：

“此属性指定块容器中第一行文本的缩进。更准确地说，它指定流入块的第一个行框的第一个框的缩进。该框相对于行框的左（或右，对于从右到左的布局）边缘缩进。……”</p>

“注意：由于 'text-indent' 属性继承，当在块元素上指定时，它将影响后代 inline-block 元素。”</p>

可能是最后的报价可以解释神奇的display: inline-block;效果。

另外，根据this answer to similar question。direction: rtl;强制元素尊重css 规范：“框相对于左侧（或右侧，对于从右到左的布局）缩进”。我认为text-align: right;以类似的方式工作。

Answer 3

所以...我发现了一些有趣的东西。

如果您有一个元素，text-align:right并且您将文本向左缩进 ( text-indent:-9999px)，则文本将显示。

我想将文本对齐一个方向并缩进另一个方向是相当矛盾的。但是，将 更改text-indent为正数 ( text-indent:9999px) 会尊重缩进。

另一方面，另一个（更优雅的？）解决方案是根本不缩进文本，而是将其推到元素之外。

小提琴：http: //jsfiddle.net/robche/TNdbh/

Answer 4

只需更改text-indent:-9999px为text-indent:9999px与text-align: right

Answer 5

white-space: nowrap属性解决了我的锚元素中的问题。