"переполнение текста: многоточие;"в приложениях XUL - PullRequest
Новая
       0

"переполнение текста: многоточие;"в приложениях XUL

2 голосов
/ 04 октября 2010

Я пишу расширение для существующего XUL-приложения, conkeror.Таким образом, в какой-то части пользовательского интерфейса, который я пишу, я создаю элементы HTML с фиксированной шириной, в данном случае <span> s, для отображения различных результатов.

Внутри этихspan s есть текст какой-то текст, который иногда слишком длинный, чтобы вместить его фиксированный контейнер.Я хотел бы отрезать части, которые являются слишком длинными, и завершить их многоточием.

Эти span в настоящее время имеют следующие атрибуты CSS: 

display: inline-block;
width: 30%;
overflow: hidden;
white-space: nowrap;

В дополнение к этому я хотел бы использовать text-overflow: ellipsis;, но оказывается, что платформа Gecko пока не реализует это.Однако для простых HTML-страниц с обычными таблицами стилей для Firefox и других продуктов, основанных на Gecko, существует обходной путь, который позволяет обрезать слишком длинный текст и в любом случае помещать многоточие в конец.

подробности этой техники описаны здесь .Он использует способность Gecko запускать код XUL, чтобы творить чудеса.

Так что я попытался использовать это и в своем приложении XUL.Я изменил свою таблицу стилей, включив в нее описанный -moz-binding: url('ellipsis.xml#ellipsis');, а также создал файл elipsis.xml, как описано.

Однако, делая это (или аналогичные вещи, используя разные URL-адреса, например chrome: //или абсолютный файл: // URLs), похоже, никак не влияет на мое приложение.На самом деле, по словам strace, он даже не пытается получить доступ к файлу ellipsis.xml.

Очевидно, что XUL может делать то, что я хочу, поэтому я предполагаю, что я делаю что-то не так, или я просто упускаю некоторые детали, о которых мне нужно позаботиться в первую очередь, чтобы получить желаемые результаты.

Я ищу способ вывести обычную дорожку text-overflow: ellipsis; в XULприложение или, альтернативно, способ получить тот же результат без вышеупомянутой техники.

Ответы [ 2 ]

2 голосов
/ 06 октября 2010

По некоторым (может быть, из соображений безопасности) вам необходимо использовать chrome:// url в вашем CSS-файле. Я протестировал его с conkeror 0.9.2 и xulrunner 1.9.1. 

-moz-binding: url("chrome://conkeror/content/ellipsis.xml#ellipsis");

Где ваш ellipsis.xml находится в /conkeror/install/path/modules/ (в debian / usr / share / conkeror / modules). Вы можете проверить файл chrome.manifest, чтобы найти правильное местоположение для вашего XML-файла, возможно, папку стиля.

1 голос
/ 04 октября 2010

Вы сказали, что не имеет НИКАКОГО эффекта?

С 

display:block; text-overflow:clip; overflow:hidden; white-space:nowrap;

это должно как минимум обрезать текст без "...".

Правильно ли указана ссылка на ваш xml-файл, а ваши css и xml-файлы находятся по одному пути?

Также попробуйте использовать этот код: 

<?xml version="1.0"?>
<bindings
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
<binding id="none">
  <content><children/></content>
</binding>
<binding id="ellipsis">
  <content>
    <xul:label crop="end"><children/></xul:label>
  </content>
  <implementation>
    <field name="label"> document.getAnonymousNodes( this )[ 0 ] </field>
    <field name="style"> this.label.style </field>
    <property name="display">
       <getter>
         this.style.display
       </getter>
       <setter>
         if( this.style.display != val ) this.style.display= val
       </setter>
    </property>
    <property name="value">
      <getter>
         this.label.value
      </getter>
      <setter>
        if( this.label.value != val ) this.label.value= val
      </setter>
    </property>
    <method name="update">
      <body>
         var strings= this.textContent.split( /\s+/g )
         if( !strings[ 0 ] ) strings.shift()
         if( !strings[ strings.length - 1 ] ) strings.pop()
         this.value= strings.join( ' ' )
         this.display= strings.length ? '' : 'none'
      </body>
    </method>
    <constructor> this.update() </constructor>
  </implementation>
  <handlers>
    <handler event="DOMSubtreeModified"> this.update() </handler>
  </handlers>
</binding>
</bindings>
...