Несколько проблем совместимости браузеров с текстом -многоточие переполнения слева -при использовании RTL

. Моя цель - создать элемент со скрытым переполнением и многоточием, за исключением того, что я хочу, чтобы символы на ЛЕВОЙ стороне были скрыты, а многоточие также было слева. Это работает для большинства браузеров:

CSS:

#mydiv {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    direction:rtl;
}

HTML:

<div id="mydiv">foobar foobar foobar</div>

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

...obar foobar

Однако из того, что я могу сказать (и честно предупреждаю всех, кто пытается это сделать, поскольку я видел решение direction:rtlв нескольких других местах ), ЕДИНСТВЕННЫЙ основной браузер, который делает это правильно, похоже, это Firefox.. Safari и Google Chrome поместят многоточие слева от текста, но затем все равно обрежут его справа, вот так:

...foobar foob

IE9 и Opera совершенно запутались. IE обрезает справа и заставляет текст перекрывать многоточие. Opera, безусловно, самая креативная, сделает видимым переполнение отдельных слов на некоторое время (по мере сужения элемента, то есть ), затем начнет усекать крайнее левое слово, но справа. Он также не может отобразить многоточие, а в одном эксперименте я даже переместил символ ™ полностью влево. Действительно. Итак, «foobar foobar foobar™» становится:

™foob foobar

В качестве дополнительного примечания, одним (крайне раздражающим )потенциальным вариантом для браузеров webkit может быть установка -webkit-rtl-ordering:visual, которая обрезает слева, НО также буквально отображает символы в обратном порядке:

...boofraboof

Таким образом, с помощью браузера -или какой-либо -разновидности -или -неясной -функции -сниффинга теоретически можно установить это свойство и динамически перевернуть текст элемента.

Существует ли простой обходной -браузерный обходной путь или даже сложный,JS -на основе?