复选框和单选 XUL 元素的裁剪不起作用

Question

我正在尝试裁剪复选框的超长标签，使其适合父节点设置的边界。我不明白为什么 crop 属性被完全忽略：

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="center" flex="1">
    <vbox style="width: 35em; overflow: hidden;" flex="1">
        <hbox>
            <checkbox crop="center" style="max-width: 35em;" label="1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198"/>
        </hbox>
    </vbox>
</dialog>

它不仅不会裁剪标签，还会将其包装成多行。

有什么想法吗？

Answer 1

正如您所确定的，这是 Firefox 中的一个错误。你已经 filed a bug about it. Now that I read the bug, I see that you have already determined one method of getting this to work. Prior to seeing that bug, I had already written the code needed to get crop on <checkbox> (and <radio>) 为你工作了。

如果您已有适合您的代码，请post回答。

问题是对于两个 <checkbox> and <radio> the XBL causes a <text> node to be created as a child of the <label> containing the text for the <checkbox> or <radio>. However, the nsIDOMXULDescriptionElement interface, which is what does the cropping, is implemented for the value attribute of <label> 元素，而不是子 <text> 节点。

两种解决方案是为<text>节点实现nsIDOMXULDescriptionElement，或者在[=18]时对文本使用label的value属性=] 属性存在（或者可能只有当它有效时）。使用子 <text> 节点的原因是当文本太长无法水平放置时，允许 <label> 为多个换行。换句话说，创建 <text> 节点是为了允许 crop.

以外的功能

通过 XBL 查找 XUL 似乎在 multiple elements 中使用了此构造。我没有调查使用此构造是否会导致 crop.

以外的其他元素出现问题

对于 <checkbox> and <radio>，XBL 包含几个不同的文件。

<checkbox>（在绑定 ID 的 checkbox 和 checkbox-crop-with-spacing 中）需要的行是：

<xul:label class="checkbox-label" xbl:inherits="value=label,accesskey,crop" flex="1"/>

而不是：

<xul:label class="checkbox-label" xbl:inherits="xul:text=label,accesskey,crop" flex="1"/>

对于无线电（多个文件），需要的行（对于绑定 ID radio 和 radio-with-spacing）是：

<xul:label class="radio-label" xbl:inherits="value=label,accesskey,crop" flex="1"/>

而不是：

<xul:label class="radio-label" xbl:inherits="xul:text=label,accesskey,crop" flex="1"/>

现在，因为我们希望该功能同时具有裁剪标签和多行标签，所以我们不想只更改这些行。我们想要创建仅在存在 crop 属性时才应用的附加 XBL 绑定。

新绑定(checkbox_radio_crop.xml):

<?xml version="1.0"?>
<bindings id="checkboxAndRadioCropBindings"
   xmlns="http://www.mozilla.org/xbl"
   xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
   xmlns:xbl="http://www.mozilla.org/xbl">

  <binding id="checkbox-crop"
           extends="chrome://global/content/bindings/checkbox.xml#checkbox">
    <content>
      <xul:image class="checkbox-check" xbl:inherits="checked,disabled"/>
      <xul:hbox class="checkbox-label-box" flex="1">
        <xul:image class="checkbox-icon" xbl:inherits="src"/>
        <xul:label class="checkbox-label"
                   xbl:inherits="value=label,accesskey,crop" flex="1"/>
      </xul:hbox>
    </content>
  </binding>

  <binding id="checkbox-crop-with-spacing"
           extends="chrome://global/content/bindings/checkbox.xml#checkbox">
    <content>
      <xul:hbox class="checkbox-spacer-box">
        <xul:image class="checkbox-check" xbl:inherits="checked,disabled"/>
      </xul:hbox>
      <xul:hbox class="checkbox-label-center-box" flex="1">
        <xul:hbox class="checkbox-label-box" flex="1">
          <xul:image class="checkbox-icon" xbl:inherits="src"/>
          <xul:label class="checkbox-label"
                     xbl:inherits="value=label,accesskey,crop" flex="1"/>
        </xul:hbox>
      </xul:hbox>
    </content>
  </binding>


  <binding id="radio-crop"
           extends="chrome://global/content/bindings/radio.xml#radio">
    <content>
      <xul:hbox class="radio-check-box1" xbl:inherits="selected,checked,disabled">
        <xul:hbox class="radio-check-box2" flex="1">
          <xul:image class="radio-check" xbl:inherits="selected,checked,disabled"/>
        </xul:hbox>
      </xul:hbox>
      <xul:hbox class="radio-label-box" align="center" flex="1">
        <xul:image class="radio-icon" xbl:inherits="src"/>
        <xul:label class="radio-label"
                   xbl:inherits="value=label,accesskey,crop" flex="1"/>
      </xul:hbox>
    </content>
  </binding>

  <binding id="radio-crop-with-spacing"
           extends="chrome://global/skin/globalBindings.xml#radio">
    <content>
      <xul:hbox class="radio-spacer-box">
        <xul:hbox class="radio-check-box1" xbl:inherits="selected,checked,disabled">
          <xul:hbox class="radio-check-box2" flex="1">
            <xul:image class="radio-check" xbl:inherits="selected,checked,disabled"/>
          </xul:hbox>
        </xul:hbox>
      </xul:hbox>
      <xul:hbox class="radio-label-center-box" flex="1">
        <xul:hbox class="radio-label-box" flex="1">
          <xul:image class="radio-icon" xbl:inherits="src"/>
          <xul:label class="radio-label"
                     xbl:inherits="value=label,accesskey,crop" flex="1"/>
        </xul:hbox>
      </xul:hbox>
    </content>
  </binding>

</bindings>

然后 CSS 在 crop 属性存在时应用绑定 (checkbox_radio_crop.css):

checkbox[crop] {
    -moz-binding: url('checkbox_radio_crop.xml#checkbox-crop');
}
checkbox-with-spacing[crop] {
    -moz-binding: url('checkbox_radio_crop.xml#checkbox-crop-with-spacing');
}
radio[crop] {
    -moz-binding: url('checkbox_radio_crop.xml#radio-crop');
}
radio-with-spacing[crop] {
    -moz-binding: url('checkbox_radio_crop.xml#radio-crop-with-spacing');
}

然后我们可以使用一些基于您在问题中提供的内容的 XUL 对其进行测试：

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="checkbox_radio_crop.css" type="text/css"?>

<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="center" flex="1">
    <groupbox >
        <caption label="Test checkboxes"/>
        <checkbox crop="start"  style="max-width: 35em;" label="crop=&quot;start&quot; 1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198    crop=&quot;start&quot; "/>
        <checkbox crop="center" style="max-width: 35em;" label="crop=&quot;center&quot; 1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198"/>
        <checkbox crop="end"    style="max-width: 35em;" label="crop=&quot;end&quot; 1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198"/>
        <checkbox               style="max-width: 35em;" label="no crop 1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198"/>
    </groupbox>
    <groupbox>
        <caption label="Test radios"/>
        <radiogroup>
            <radio crop="start"  label="crop=&quot;start&quot; 1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198    crop=&quot;start&quot;" />
            <radio crop="center" label="crop=&quot;center&quot; 1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198"/>
            <radio crop="end"    label="crop=&quot;end&quot; 1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198"/>
            <radio               label="no crop 1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198"/>
        </radiogroup>
    </groupbox>
</dialog>

以上测试XUL用于打开对话框时window显示如下：

要使其在您的 XUL 中运行，您需要文件 checkbox_radio_crop.xml 和 checkbox_radio_crop.css。然后您需要添加行：

<?xml-stylesheet href="checkbox_radio_crop.css" type="text/css"?>

到您的 XUL。显然，文件当前使用相对 URL 来引用文件。因此，它们将需要位于与您的 XUL 相同的目录中。当然，您可以通过使用完全限定的 chrome:// URL 来引用 CSS 和您的 XUL 中所需的文件，将文件放在您想要的任何位置。

虽然上述更改可以放入 Firefox 中，但它们需要去的地方实际上是跨多个文件的。因此，它稍微复杂一些。我将了解如何更新 Mozilla bug with the code that would need to change for a fix. In addition, I'll work on the MDN documentation for crop 以明确它在 <checkbox> 和 <radio> 元素中不起作用。我还将提供此代码作为 polyfill。

复选框和单选 XUL 元素的裁剪不起作用

Crop for checkbox and radio XUL elements doesn't work

firefox

firefox-addon

xul

thunderbird-addon

xbl