2012-08-16 2 views
8

Моя цель - создать элемент со скрытым переполнением и многоточие, за исключением того, что я хочу, чтобы символы на стороне 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?

+0

Я открыл ошибку в этой проблеме http://crbug.com/155836. Обратите внимание, что эта проблема возникает только при использовании ltr langue. Chrome правильно использует языки rtl. – Mbrevda

ответ

2

У вас есть решения на основе JS/Jquery. Одно предупреждение - они дороже. Если вы не делаете кучу изменений на своей странице, то следующие решения должны работать нормально.

Dotdotdot: http://dotdotdot.frebsite.nl/

ThreeDots http://tpgblog.com/2009/12/21/threedots-the-jquery-ellipsis-plugin/

Edit: Просто чтобы быть ясно, я вижу те же самые проблемы, которые вы упомянули.