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>

score 14 · Accepted Answer · edited May 23 '17 at 11:48

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>

Thank you for this - setting `min-width: 0` and `display: table-cell` on the `fieldset` fixed this in Chrome and Firefox, respectively. See link to "the fix" in the answer. — Ryan Burney, Nov 23 '15 at 22:22

score 0 · Answer 2 · answered Sep 15 '11 at 17:13

0

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.

answered Sep 15 '11 at 17:13

Joe

15,669
4
48
83

3

That's one work-around I found, but there should theoretically be a way to do it without setting the width, since I need to also handle resize events. – skalb Sep 15 '11 at 23:12

Overflow and Text-overflow within fieldsets

2 Answers2