複選框和廣播XUL元素裁剪不起作用

我想裁剪複選框的非常長的標籤，以便它適合它的父節點設置的邊界。我想不通爲什麼crop屬性被完全忽略：複選框和廣播XUL元素裁剪不起作用

<?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>

不但沒有它裁剪標籤，但它也把它包裝成多行。

任何想法？

來源

2016-07-27 vanowm

包裝成多行是預期的行爲。你沒有任何東西限制你任何元素的高度。因此，他們*應該*增加高度以適應內容。參見['maxheight']（https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/maxheight）XUL屬性或['max-height']（https：// developer.mozilla.org/en-US/docs/Web/CSS/max-height）CSS屬性。 – Makyen

即使我在任何元素上設置高度，並且它在一行中顯示，它仍然不裁剪文本，沒有顯示省略號。無論我做什麼，我都無法使其顯示省略號。 – vanowm

這與我在我做過的簡短測試中看到的一致。我還沒有機會看看XBL或源代碼，看看可能發生了什麼。我記得在幾年前我使用'crop'短暫地測試了一個不同元素的項目。我不記得爲什麼我目前沒有使用它。 – Makyen

正如您確定的那樣，這是Firefox中的一個錯誤。您已經有filed a bug about it。現在，我讀了這個錯誤，我發現你已經確定了一個讓它工作的方法。在看到這個錯誤之前，我已經編寫了需要獲得crop的代碼<checkbox>（和<radio>）爲你工作。

如果您已經擁有適合您的代碼，請發表一個答案。

的問題是，對於這兩種<checkbox>和<radio>的XBL導致<text>節點被創建爲<label>包含了<checkbox>或<radio>文本孩子。但是，nsIDOMXULDescriptionElement界面（這是修剪操作）是爲value屬性<label>元素實施的，但不適用於子節點<text>。

的兩種解決方案，其一是實現nsIDOMXULDescriptionElement爲<text>節點，或當crop屬性存在（或者只有當它是有效的）使用label的value屬性的文本。使用子節點<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>

那麼當crop屬性存在的CSS應用綁定（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用來打開一個對話窗口將顯示以下內容：

，使其在你的XUL工作，你將需要的文件checkbox_radio_crop.xml和checkbox_radio_crop.css。然後您需要添加該行：

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

到您的XUL。顯然，這些文件目前正在使用相對URL來引用文件。因此，它們將需要位於與XUL相同的目錄中。當然，您可以使用完全合格的chrome://網址在CSS和您的XUL中引用所需文件，從而將文件放置在任何需要的位置。

雖然上述更改可以放入Firefox，但他們需要去的地方實際上是跨越多個文件。因此，它更復雜一些。我會看到更新Mozilla bug的代碼，這些代碼需要修改才能修復。另外，我將在crop的MDN文檔中明確指出它不適用於<checkbox> & <radio>元素。我還將提供此代碼作爲polyfill。

來源

2016-08-02 01:50:44 Makyen

複選框和廣播XUL元素裁剪不起作用

回答

相關問題