"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>
加载中,请稍侯......
精彩评论