Overflow and Text-overflow within fieldsets

Here's a working example (in webkit browsers, at least) of overflow and text-overflow working to truncate long text when you shrink the browser width:

<div>short</div>
<div style="overflow: hidden; text-overflow:ellipsis;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</d开发者_高级运维iv>
<div>short</div>
<div>short</div>
<div>short</div>

But, if I wrap those divs in a fieldset the truncate no longer happens. Any ideas on additional styling I need to add?

Broken example:

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

This is due to weird behavior with fieldsets, and the fix is to change certain CSS properties that browsers set to weird values. For instance, this example also makes the legend get cut off nicely. It works in Chrome for me but you may need to read through the fix to see how to get it working in other browsers too.

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>

It will work if you add a fixed width to fieldset, for example <fieldset style="width: 500px">. Would that be enough? Percentage widths don't seem to work.