Моя цель - создать элемент со скрытым переполнением и многоточие, за исключением того, что я хочу, чтобы символы на стороне LEFT были скрыты, а также многоточие быть слева. Это работает для большинства браузеров:Несколько проблем с совместимостью браузера с эллипсисом переполнения текста с левой стороны с использованием 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-based?
Я открыл ошибку в этой проблеме http://crbug.com/155836. Обратите внимание, что эта проблема возникает только при использовании ltr langue. Chrome правильно использует языки rtl. – Mbrevda