Блог

Главная - Вопросы по программированию - Как я могу сделать так, чтобы электронное письмо, начинающееся с цифры, выглядело правильно в RTL, а не test-mail.com@000 ?

Как я могу сделать так, чтобы электронное письмо, начинающееся с цифры, выглядело правильно в RTL, а не test-mail.com@000 ?

#javascript #css #vue.js

#javascript #css #vue.js

Вопрос:

У меня проблема с электронными письмами, которые содержат только цифры в первой части письма, например 1892813@testdomain.com , в rtl направлении. Даже приложение, использующее rtl direction в арабской версии, я хотел бы придерживаться ltr направления для электронных писем. Единственная проблема заключается в том, что с числовой первой частью электронного письма она выглядит плохо внутри ввода,

Пример кода

 <b-input
    class="custom-input"
    dir="rtl"
    type="e-mail"
    :value="value"
    @input="handleInput"
  ></b-input>
 
 .custom-input {
  [dir="ltr"] amp; {
    unicode-bidi: bidi-override;
    direction: ltr;
    text-align: left;
  }

  [dir="rtl"] amp; {
    unicode-bidi: bidi-override;
    direction: ltr;
    text-align: left;
  }
}

Поэтому, когда rtl направление задано для всего приложения, я хотел бы иметь значение внутри ввода 0000@testmail.com вместо test-mail.com@000

Пример песочницы с вводом https://codesandbox.io/s/stoic-leakey-tnd7h?file=/src/App.vue

Комментарии:

1. Привет, Вертон: не могли бы вы пояснить, что вы подразумеваете под «хорошо выглядеть»? Есть ли фактическая техническая ошибка или правильный желаемый результат, который вы ищете?

2. Пожалуйста, включите весь соответствующий код здесь, в Stack Overflow, а не только в CodeSandbox.

3. Даже если есть ссылка на codesandbox, скриншот желаемого и нежелательного поведения было бы неплохо иметь здесь. Высказывание «это выглядит не очень хорошо» без иллюстрации заставило некоторых фанатиков закрыть ваш вопрос, я проголосовал за повторное открытие, но, пожалуйста, обновите свой вопрос, чтобы он был более автономным.

Ответ №1:

попробуйте это на вашем входе

     direction: ltr;
    text-align: right;
Метки: