复选框和收音机XUL元素的裁剪不起作用
我尝试裁剪复选框的超长标签，使其适合由其父节点设置的边界。我无法弄清楚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>
它不仅不会裁剪标签，还会将其包装成多行。
有什么想法吗？
1 个答案:
答案 0 :(得分：2)
正如您所确定的，这是Firefox中的一个错误。你已经filed a bug about it了。现在我读了这个bug，我发现你已经确定了一种让它工作的方法。在看到该错误之前，我已经编写了使crop（和<checkbox>）上的<radio>为您工作所需的代码。
如果您已经有适合自己的代码，请发回答。
问题在于，对于<checkbox>和<radio>，XBL会导致<text>节点被创建为包含文本的<label>的子节点适用于<checkbox>或<radio>。但是，nsIDOMXULDescriptionElement接口（即裁剪的内容）是针对value元素的<label>属性实现的，而不是针对子<text>个节点实现的。
两个解决方案是为nsIDOMXULDescriptionElement节点实施<text>，或在value时使用label crop属性作为文本属性存在（或者仅在有效时）。使用子<text>节点的原因是当文本太长而无法水平放置时，允许<label>为多条包裹线。换句话说，创建<text>节点的目的是为了允许crop以外的功能。
通过XBL查看XUL，似乎在multiple elements中使用了此构造。我没有调查过使用这个结构是否会导致crop以外的其他元素出现问题。
对于<checkbox>和<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="start" 1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198 crop="start" "/>
<checkbox crop="center" style="max-width: 35em;" label="crop="center" 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="end" 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="start" 1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198 crop="start"" />
<radio crop="center" label="crop="center" 1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198"/>
<radio crop="end" label="crop="end" 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用于打开对话窗口时，显示以下内容：
要使其在您的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。此外，我将处理crop的MDN文档，以明确它在<checkbox>＆amp; <radio>元素。我还将此代码作为polyfill提供。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？