14

text-indent: -9999px今日、私はルールでテキストを隠すことに問題がありました。私はそれが持っていたいくつかの親要素によって引き起こされたことに気づきましたtext-align: right。jsfiddleの例。text-indentの正の値への 設定9999pxも機能しませんでした。

に設定してテキストを非表示にできましたが、なぜこのような問題が発生したのtext-alignかleftわかりません。

に設定されているのになぜtext-indenting機能しないのか誰かが説明できますか？text-alignright

IDをいじる：http： //jsfiddle.net/sNbfv/2/

4

5 に答える 5

22

ブラウザーにとっては、配置を維持することがより重要であるように思われるため、テキストの右端は何があっても右側に保持されます。

ドキュメントはltr方向に設定されているため、インデントは行の左側に適用されますが、右に揃えたいと言ったため、ブラウザーはインデントを完全に無視します。初期のブラウザが正当化の重要性の優先順位を設定した以外に、なぜこれが起こるのかについての説明はありません。text-alignを明示的に無視する限り、CSS 仕様には何もありません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>
于 2012-06-13T18:30:42.277 に答える
4

CSS 3 仕様:

このプロパティは、ブロック コンテナー内のテキストの最初の行のインデントを指定します。より正確には、ブロックの最初の行ボックスに流れ込む最初のボックスのインデントを指定します。ボックスは、ライン ボックスの左端 (右から左へのレイアウトの場合は右端) に対してインデントされます。…」</p>

「注: 'text-indent' プロパティは継承されるため、ブロック要素で指定すると、子孫のインライン ブロック要素に影響します。」</p>

最後の引用は魔法のdisplay: inline-block;効果を説明できるかもしれません.

また、同様の質問に対するこの回答に応じて。direction: rtl;force 要素がcss 仕様を尊重するようにします: 「ボックスは左 (または右から左へのレイアウトの場合は右) に対してインデントされます」.text-align: right;同様の方法で機能すると思います.

于 2012-06-13T18:03:52.923 に答える
0

と組み合わせると にtext-indent:-9999px変わるだけtext-indent:9999pxtext-align: right

于 2014-02-27T10:44:37.067 に答える
0

white-space: nowrapプロパティは私のアンカー要素の問題を解決しました。

于 2015-02-22T16:43:52.720 に答える
0

それで...私はこれについて興味深いものを見つけました。

の要素がtext-align:rightあり、テキストを左 ( ) にインデントするとtext-indent:-9999px、テキストが表示されます。

テキストを一方向に揃えて別の方向にインデントすることは、かなり矛盾していると思います。ただし、 をtext-indent正の数 ( text-indent:9999px) に変更すると、インデントが尊重されます。

別の注意として、別の (より洗練された?) 解決策は、テキストをまったくインデントせずに、要素の外に押し出すことです。

フィドル: http://jsfiddle.net/robche/TNdbh/

于 2013-04-10T10:39:16.073 に答える