代码之家 › 专栏 › 技术社区 › rafl

XUL应用程序中的“文本溢出:省略号;”

css3 xul css html

2

rafl · 技术社区 · 15 年前

我正在编写的用户界面的某些部分,我正在用固定宽度, <span> 在本例中,显示各种结果。

在这些 span 将其与容器固定。我想把太长的部分剪掉, 以省略号结尾。

跨度 当前具有以下CSS属性:

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

text-overflow: ellipsis; ,但它变成了 Gecko平台还没有实现这一点。但是,对于纯HTML页面对于常规样式表,Firefox和其他基于壁虎的产品,这使得剪掉过长的文字和放置

描述了该技术的细节 here 利用Gecko运行XUL代码的能力来实现它的魔力。

所以我也尝试在我的XUL应用程序中使用它。我改变了主意包含所描述的 -moz-binding: url('ellipsis.xml#ellipsis'); ,还创建了 elipsis.xml 按说明归档。

但是,使用不同的URL执行此操作(或类似操作,例如chrome://或 ellipsis.xml 文件位于

显然XUL能做我想做的,所以我假设我在做些什么错了,或者我只是错过了一些细节,我必须首先照顾为了得到想要的结果。

文本溢出:省略号; 没有上述技术。

2 回复 | 直到 15 年前

1

2

wose 15 年前

出于某些(可能是安全)原因,您需要使用 chrome:// CSS文件中的url。我用conkeror0.9.2和xulrunner1.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

1

koko 15 年前

你说它没有任何效果?

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>