text-indent ne fonctionne pas en text-align: right

Aujourd'hui, j'ai eu un problème avec le masquage de texte avec text-indent: -9999px règle. J'ai réalisé que c'était causée par un élément parent qui a eu text-align: right. Exemple sur jsfiddle. Réglage text-indent à valeur positive de 9999px ne fonctionnent pas aussi bien.

J'ai réussi à masquer le texte en paramètre, c'est text-align à la left, mais je ne comprends pas pourquoi ce problème est survenu.

Quelqu'un pourrait-il expliquer pourquoi text-indenting ne fonctionne pas alors que text-align est définie à l' right?

Tripoter id:
http://jsfiddle.net/sNbfv/2/

Votre violon fonctionne parfaitement pour moi. Quel navigateur?
parce que j'ai édité. :-))
Notez que third div a la classe intended et il n'EST PAS visible. second div a aussi la classe intended mais il EST visible.

OriginalL'auteur user1292810 | 2012-06-13

  1. 20

    Il semble que le maintien de l'alignement est plus important pour le navigateur, de sorte que le bord droit du texte est conservé sur le côté droit, peu importe quoi.

    Le document est mis à la ltr direction, de sorte que le tiret est appliqué à la gauche de la ligne, mais puisque vous avez dit que vous le souhaitez aligner à droite, le navigateur ignore le tiret entièrement. Je n'ai aucune explication des raisons pour lesquelles cela se produit, autre que les premiers navigateurs paramètre de priorité de la justification de l'importance. Il n'y a rien dans le CSS aussi loin que text-align explicitement ignorant text-indent.

    La boîte est en retrait à l'égard de la gauche (ou à droite, pour
    de droite à gauche mise en page) de la limite de la zone de ligne. Les agents utilisateurs doivent rendre
    cette mise en retrait comme espace vide.

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

    Si nous mettons à jour le violon pour avoir un rtl direction, le tiret, en effet, influe sur le côté droit du texte. J'ai ajouté une bordure de montrer que les débordements qui se passe.

    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>

    La solution la plus simple semble être de l'alignement qui nichaient tiret 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>

    OriginalL'auteur MetalFrog

  2. 4

    CSS 3 Spécifications:

    “Cette propriété spécifie l'indentation de la première ligne de texte dans un bloc conteneur. Plus précisément, il indique que l'indentation de la première zone qui se jette dans le bloc de la première ligne de la boîte. La boîte est en retrait à l'égard de la gauche (ou à droite, de droite à gauche, mise en page) de la limite de la zone de ligne. ...”

    “Remarque: Depuis le 'text-indent' hérite de la propriété, lorsqu'elle est spécifiée sur un élément de type block, il va y avoir descendant inline-block éléments.”

    Peut-être la dernière citation ne peut expliquer la magie display: inline-block; effet.

    Aussi, en conséquence de cette réponse à la même question. direction: rtl; élément de la force à l'égard css: “la boîte est en retrait à l'égard de la gauche (ou à droite, de droite à gauche mise en page”. Je pense que text-align: right; fonctionne de la même façon.

    en effet, le réglage de l'élément de direction:rtl résout l'étrangeté.

    OriginalL'auteur Vladimir Starkov

  3. 0

    Alors... j'ai trouvé quelque chose d'intéressant sur ce.

    Si vous avez un élément avec text-align:right et de vous mettre en retrait le texte à gauche (text-indent:-9999px) le texte à afficher.

    Je suppose que l'alignement du texte un sens, et que la mise en retrait de l'autre est assez contradictoire. Toutefois, la modification de la text-indent à un nombre positif (text-indent:9999px) le tiret est respectée.

    Sur une autre note, un autre (le plus élégant?) la solution est de ne pas mettre en retrait le texte, mais de le pousser à l'extérieur de l'élément.

    Violon: http://jsfiddle.net/robche/TNdbh/

    Ajout d'une overflow:hidden à la liste comme la mise en retrait vers la droite reste dans les dom flux de... hmm... peut-être la deuxième solution que j'ai posté est mieux, après tout 🙂

    OriginalL'auteur rob_was_taken

  4. 0

    Il suffit de changer text-indent:-9999px à text-indent:9999px lorsqu'il est combiné avec text-align: right

    OriginalL'auteur reina

  5. 0

    white-space: nowrap bien résolu le problème dans mon élément ancre.

    OriginalL'auteur spetsnaz