Как получить переполнение текста: стиль многоточия (...) в Mozilla - PullRequest
Новая
       22

Как получить переполнение текста: стиль многоточия (...) в Mozilla

2 голосов
/ 07 января 2011

Я пытаюсь получить многоточие в Mozilla. Я обнаружил некоторый плагин jquery, который помогает формировать многоточие в Mozilla, но когда приходит огромное количество данных, он не справляется с ошибкой формирования скрипта на странице.

Я думаю, что на самом деле jquery обрабатывает каждое слово за словом, выполнение которого занимает много времени, что является причиной ошибки скрипта.Есть ли простой способ показать многоточие в Mozilla или любой плагин jquery, который может обрабатывать большие данные.

1 Ответ

5 голосов
/ 07 января 2011

[РЕДАКТИРОВАТЬ] Обратите внимание: С тех пор как я разместил оригинальный ответ здесь, все изменилось.Хак, описанный ниже, работает только для Firefix версии 3.x.Он не работает в FF4, 5 или 6. В этих версиях Firefox нет известных решений этой проблемы.

Однако функция многоточия должна быть включена в Firefox 7,из-за месяца или двух, так что вам не придется слишком долго ждать, а благодаря функции автообновления, которую они теперь добавили в Firefox, большинство пользователей должны перейти на новую версию вскоре после ее выпуска.

Для получения дополнительной информации по этой теме см. Этот вопрос: переполнение текста: многоточие в Firefox 4?(и FF5)

Я уже отметил это предостережение ниже в комментариях, но, поскольку люди все еще голосуют против этого ответа, они могут не читать комментарии, поэтому я редактирую ответ, чтобы поместить его всверху здесь.Я оставлю оригинальный ответ ниже для справки.И он все еще работает в FF3.x, так что это может быть лучше, чем ничего.

Исходный ответ следует:

Firefox - единственный браузер, который (в настоящее время) не поддерживает функцию CSS Ellipsis.

Хорошая новость заключается в том, что это обходной путь.Это не очень хорошо известно, но работает хорошо.

Работает, используя немного пользовательского XUL, на который затем ссылаются в таблице стилей, используя пользовательское объявление стиля -moz-binding.(XUL - это язык определения пользовательского интерфейса на основе XML в Mozilla. Весь пользовательский интерфейс Firefox написан с его использованием)

Во-первых, вам нужно создать файл, содержащий определение XUL.Это должно выглядеть так: 

<?xml version="1.0" encoding="UTF-8"?>
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <binding id="ellipsis">
     <content>
        <xul:window>
           <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
        </xul:window>
     </content>
  </binding>
</bindings>

Сохраните этот файл как ellipsis-xbl.xml где-нибудь на вашем веб-сервере.

Затем перейдите к таблице стилей: 

.myellipsiselement {
  word-wrap:normal;
  white-space:nowrap;
  overflow:hidden;
  -moz-binding:url(ellipsis-xbl.xml#ellipsis);
  -o-text-overflow:ellipsis;
  text-overflow:ellipsis;
}

Очевидно,измените URL привязки, где бы вы ни сохранили ее на своем сайте.

Теперь Firefox поддерживает многоточие.Уууу!

Есть одна большая оговорка, о которой вам необходимо знать: XUL отличается от HTML тем, что HTML игнорирует пробел, а XUL - нет.Поскольку привязка означает, что ваш HTML-код в данном случае эффективно обрабатывается как XUL, вы обнаружите, что если в усекаемом элементе есть пробел, он станет видимым.

Это означает, что вы получитенекоторые странные проблемы с отображением, если у вас есть HTML, как это: 

<div>
  some text here that needs an ellipsis
</div>

Вам нужно переместить открывающий и закрывающий теги в ту же строку, что и текст, например: 

<div>some text here that needs an ellipsis</div>

Нокак только вы это сделаете, эта техника должна работать отлично - по крайней мере, пока Firefox не начнет поддерживать нормальный многоточие CSS ... в этот момент можно догадаться, что произойдет!

Мы использовали эту техникуэкстенсивно, но поверьте, где это необходимо - мы узнали об этом здесь: http://ernstdehaan.blogspot.com/2008/10/ellipsis-in-all-modern-browsers.html

...