Text-indent не работает во время выравнивания текста: справа

Сегодня у меня возникла проблема со скрытым текстом с правилом text-indent: -9999px. Я понял, что это вызвано каким-то родительским элементом, который имел text-align: right. Пример jsfiddle. Настройка text-indent на положительное значение 9999px тоже не работала.

Мне удалось скрыть текст, установив его text-align в left, но я не понимаю, почему возникла такая проблема.

Может ли кто-нибудь объяснить, почему text-indenting не работает, а text-align установлен в right?

Скрипт с идентификаторами: http://jsfiddle.net/sNbfv/2/

Ответ 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>

Простым решением кажется выравнивание вложенного отступа 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>

Ответ 2

CSS 3 Specs:

"Это свойство указывает отступ первой строки текста в контейнере блока. Точнее, он определяет отступ первого поля, которое втекает в поле первой строки блока. Ящик имеет отступ по отношению к левому ( или справа, для выравнивания справа налево) к краю строки строки..."

"Примечание. Поскольку свойство text-indent наследует, когда указано в блочном элементе, оно будет влиять на элементы встроенного блока потомков.

Может быть, последняя цитата может объяснить эффект магии display: inline-block;.

Кроме того, в соответствии с этим ответ на аналогичный вопрос. direction: rtl; Силовой элемент должен учитывать css spec: "поле имеет отступ по отношению к левому (или справа, для макета справа налево). Я думаю, что text-align: right; работает аналогичным образом.

Ответ 3

Итак... Я нашел в этом что-то интересное.

Если у вас есть элемент с text-align:right и вы отделите текст влево (text-indent:-9999px), текст отобразится.

Я предполагаю, что выравнивание текста в одном направлении и отступ другого является довольно противоречивым. Однако, изменив text-indent на положительное число (text-indent:9999px), отступ будет соблюден.

В другом примечании другое (более элегантное?) решение состоит в том, чтобы не отступать от текста вообще, а выталкивать его за пределы элемента.

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

Ответ 4

Просто измените text-indent:-9999px на text-indent:9999px в сочетании с text-align: right

Ответ 5

white-space: nowrap свойство решило проблему в моем якорь-элементе.