“文本溢出：省略号；”在 XUL 应用中答案

【问题标题】："text-overflow: ellipsis;" in XUL applications“文本溢出：省略号；”在 XUL 应用中
【发布时间】：2010-10-04 04:34:22
【问题描述】：

我正在为现有的 XUL 应用程序编写扩展程序，conkeror。其中，在我正在编写的用户界面的某些部分，我正在创建 HTML 元素固定宽度，在本例中为 <span>s，用于显示各种结果。

在那些spans 中有一些文本，有时太长了适合其固定容器。我想剪掉太长的部分，并以省略号结束。

那些spans 当前具有以下 CSS 属性：

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

除此之外，我想使用text-overflow: ellipsis;，但它变成了 Gecko 平台还没有实现这一点。但是，对于纯 HTML 页面使用常规样式表，Firefox 和其他基于 Gecko 的产品，它可以截断过长的文本并添加无论如何，省略号在它的最后工作。

描述了该技术的细节 here。它是使用 Gecko 运行 XUL 代码的能力来发挥它的魔力。

所以我也尝试在我的 XUL 应用程序中使用它。我改变了我的包含所描述的样式表 -moz-binding: url('ellipsis.xml#ellipsis');，还创建了 elipsis.xml 文件描述。

但是，执行此操作（或使用不同 URL 的类似操作，例如 chrome:// 或 absolute file:// URLs) 似乎在我的应用。事实上，它甚至不会尝试访问ellipsis.xml 文件全部，根据 strace。

显然 XUL 能够做我想做的事，所以我假设我正在做某事错了，或者只是错过了一些我必须首先处理的细节为了得到想要的结果。

我正在寻找的是一种拉常规 text-overflow: ellipsis; 的方法在 XUL 应用程序中进行跟踪，或者，一种获得相同结果的方法没有上述技术。

【问题讨论】：

您测试的是哪个版本的 Firefox？
我正在使用 xulrunner 1.9.2 版进行测试。

标签： html xul css

【解决方案1】：

出于某些（可能是安全）原因，您需要在 CSS 文件中使用 chrome:// 网址。我用 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 文件的正确位置，可能是样式文件夹。

【讨论】：

【解决方案2】：

你说它没有任何效果？

有

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>

【讨论】：

添加-moz-binding 没有我注意到的任何效果。其他 css 属性按预期工作。
在该 xml 文件中使用其他 XUL 代码也不会改变这种情况。正如问题中指出的那样，甚至没有尝试打开该文件。
太棒了，即使是 DOM 操作，这个实现也能很好地工作。