溢出和字段集

Question

這裏內文本溢出是一個工作示例（在WebKit瀏覽器，至少）溢出和文本溢出的工作，當你縮小寬度的瀏覽器截斷長文本：

<div>short</div> 
<div style="overflow: hidden; text-overflow:ellipsis;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</div> 
<div>short</div> 
<div>short</div> 
<div>short</div> 

但是，如果我將這些div封裝在fieldset中，截斷不再發生。任何想法，我需要添加額外的樣式？

破碎例如：

<fieldset> 
    <div>short</div> 
    <div style="overflow: hidden; text-overflow: ellipsis;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</div> 
    <div>short</div> 
    <div>short</div> 
    <div>short</div> 
</fieldset> 

Answer 1

這是由於weird behavior with fieldsets和the fix將更改瀏覽器設置爲奇怪值的某些CSS屬性。例如，這個例子也使得legend得到很好的切斷。它適用於Chrome，但您可能需要閱讀the fix以瞭解如何在其他瀏覽器中使用它。

fieldset 
 
{ 
 
    min-width: 0; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
} 
 
legend 
 
{ 
 
    min-width: 0; 
 
    max-width: 100%; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
}

<fieldset><legend>This is due to weird behavior with fieldsets, and the fix is to change certain CSS properties that browsers set to weird values.</legend><span>This is a loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line of text that would normally overflow or cause the fieldset to widen and overflow itself.</span></fieldset>

Answer 2

如果添加了一個固定寬度fieldset，例如<fieldset style="width: 500px">它將工作。這足夠嗎？百分比寬度似乎不起作用。