CSS: изменить направление переполнения текста без изменения порядка текста

Question

У меня есть какой-то текст, и мне нужно, чтобы он переполнился с левой стороны его контейнера (я скрываю переполнение). В принципе, я хочу, чтобы это выглядело так

Видимо, вам нужно direction: rtl;, чтобы сделать это. Скрипач здесь.

Проблема в том, что это меняет часть порядка текста : hello, world? отображается как ?hello, world, а 1+2=3 отображается как 3=1+2.

Я пытался поиграть со свойством unicode-bidi, но я могу получить его только для того, чтобы поместить полностью справа налево.

Итак, вот актуальный вопрос: Как я могу заставить текст переполняться с левой стороны его контейнера, не переупорядочивая текст?

Answer 1

Try:

text-align:right;
white-space:nowrap;
overflow:visible;

Answer 2

Вам нужно будет обернуть текст на английском языке в промежуток с направлением LTR, а переполненный текст имеет «inline-flex», как показано ниже:

<div style="direction:rtl;width:150px;overflow:hidden;text-align:right;white-space:nowrap;">
    <div style="display:inline-flex">
        <span style="direction:ltr;">Hello people, I'm asking: 1+1=2, or what???</span>
    </div>
</div>

Вы получите: http://codepen.io/anon/pen/xKfGa

Это немного сложно, но я думаю, что это единственный правильный путь, хотя он не будет отображаться идеально в IE.

Answer 3

Если у вас есть определенный блок текста, вам нужно манипулировать, попробуйте свойство text-indent с отрицательным значением, например, так:

text-indent: -20px

Это, вероятно, не будет работать дляхотя динамический текст.