"text-overflow: ellipsis;" in XUL applications_问答_开发者

I'm writing an extension to an existing XUL-application, conkeror. In that, In some part of the user-interface of I'm writing, I'm creating HTML elements with a fixed-width, <span>s in this case, to display various results.

Within those spans there's text some text, which, on occasion, is too long to fit its fixed-with container. I'd like to cut-off the parts that are too long, and end it with an ellipsis instead.

Those spans currently have the following CSS attributes:

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

In addition to that, I'd like to use text-overflow: ellipsis;, but it turns out the Gecko platform doesn't implement that yet. However, for plain HTML pages with regular style-sheets, there happens to be a workaround for Firefox and other Gecko-based products, that makes cutting off overlong text and putting an ellipsis at its end work anyway.

The details of that technique are described here. It's using Gecko's ability to run XUL code to do its magic.

So I've tried to use that in my XUL application as well. I've changed my style-sheet to include the described -moz开发者_StackOverflow中文版-binding: url('ellipsis.xml#ellipsis');, and also created the elipsis.xml file as described.

However, doing this (or similar things using different URLs, e.g. chrome:// or absolute file:// URLs) seems to have no effect whatsoever within my application. In fact, it doesn't even try to access the ellipsis.xml file at all, according to strace.

Obviously XUL is able to do what I want, so I'm assuming I'm doing something wrong, or am simply missing out on some detail I have to take care of first in order to get the desired results.

What I'm looking for is a way to pull the regular text-overflow: ellipsis; track within a XUL application or, alternatively, a way to get the same result without the aforementioned technique.

For some (maybe security) reason you need to use a chrome:// url in your CSS file. I tested it with conkeror 0.9.2 and xulrunner 1.9.1.

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

Where your ellipsis.xml is in /conkeror/install/path/modules/ (on debian /usr/share/conkeror/modules). You can check the chrome.manifest file to find the right location for your XML file, probably the style folder.

You said it´s not having ANY effect?

With

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

it should at least cut off the text without the "...".

Is the reference to your xml file correct and your css and xml files are at the same path?

Also, try using this code:

<?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>