CODEWITHSUNDEEP
htmlcss
skalb
skalb

Reputation: 5567

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

Upvotes: 17

Views: 5080

Answers (2)

LB--
LB--

Reputation: 2958

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>

Upvotes: 23

Joe
Joe

Reputation: 15802

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.

Upvotes: 0

Related Questions