как изменить положение отрицательного знака css

У меня есть веб-сайт, который показывает свое содержание в двух направлениях. ртл и лтр.

Когда страница находится в режиме фильтрации содержимого, все в порядке, и слева от числа отображается знак минус.

body {
    direction: ltr;
}

Например: -1

Но когда страница находится в режиме rtl,

body {
    direction: rtl;
}

отрицательный знак чисел отображается справа от числа.

Например: 1-

Принимая во внимание, что я хочу показать отрицательный знак слева от числа в обоих случаях. Как мне это сделать? Спасибо.


html css negative-number
person Tavousi    schedule 16.03.2015    source источник
comment
Перенести числа и изменить направление css?   -  person skobaljic    schedule 16.03.2015
comment
как указано выше, пролет должен делать!   -  person Joe Corby    schedule 16.03.2015
comment
Вы также можете попробовать добавить к числам отметку слева направо, как ответил в этом сообщении< /а>   -  person skobaljic    schedule 16.03.2015
comment
Правильно @skobaljic. Он работал с добавлением диапазона, а затем с изменением направления и, наконец, изменением отображения на встроенный блок. Пожалуйста, ответьте на этот вопрос, пока я не помечен как ответ. Спасибо.   -  person Tavousi    schedule 16.03.2015
comment
Вы сделали это сами, вы также можете ответить на него, и я проголосую, ура.   -  person skobaljic    schedule 16.03.2015

Ответы (6)


arrow_upward
6
arrow_downward

Оберните число в диапазон и добавьте к нему два следующих css:

direction: ltr;
display: inline-block;
person Tavousi    schedule 16.03.2015
comment
почему лтр не хватает? - person Noam B.; 24.09.2017

arrow_upward
3
arrow_downward

Проверьте код ниже!

BODY {
    direction: rtl;
}
#test {
    direction: ltr;   
    text-align: right
}
    Sample Text abc <br />
    -1
    <p id="test">-1 </p>

person avnaveen    schedule 16.03.2015

arrow_upward
1
arrow_downward

Оборачивание чисел в span и изменение направления, похоже, не дало никакого эффекта, как показано в этой скрипте: https://jsfiddle.net/shaansingh/kLpa8ygv/.

Однако ОП обнаружил, что, добавив inline-block и написав - в интервале, решение сработало. Просто добавьте его к этому ответу, чтобы он был максимально находчивым. Пожалуйста, проверьте комментарии и ответ ОП для получения полной информации.

direction: ltr;
display: inline-block;

Вы всегда можете прибегнуть к небольшому количеству JavaScript, чтобы решить проблему. Используйте этот скрипт, чтобы определить, является ли тело rtl, и изменить его соответствующим образом (при условии, что ltr является значением по умолчанию в HTML):

var element = document.body,
    style = window.getComputedStyle(element),
    direction = style.getPropertyValue('direction');

if (direction == "rtl") {
    document.getElementById("neg").innerHTML = "1-";
}

Полный код находится в этой скрипте: https://jsfiddle.net/shaansingh/axpevvon/4/

person Community    schedule 16.03.2015

arrow_upward
1
arrow_downward

мы также поддерживаем оба направления на нашем сайте и с большим количеством номеров. Я обнаружил, что это чище, потому что есть случаи, которые мы не хотим менять: свойство display: inline-block;

решение:

div {
    direction: ltr;
    unicode-bidi: bidi-override;
}

https://www.w3schools.com/cssref/pr_text_unicode-bidi.asp подробнее о свойствах и опциях

person Dagan Bog-Computers    schedule 12.11.2018

arrow_upward
0
arrow_downward

Вы можете указать число в диапазоне и указать направление этого диапазона для ltr, например:

<span class="nagativeVal">-1</span>

CSS:

.nagativeVal
{
  direction: ltr;
}

Надеюсь, поможет.

person ketan    schedule 16.03.2015

arrow_upward
0
arrow_downward

Это можно использовать

body {
  direction: rtl;
  unicode-bidi: plaintext;
}

Перейдите по этой ссылке mdn

person Gurudev    schedule 29.06.2020