Overflow and Text-overflow within fieldsets

Question

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</div>
<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>

Answer 1

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>