Переполнение и переполнение текста в наборах полей

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>
  <div>short</div>
  <div style="overflow: hidden; text-overflow: ellipsis;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</div>
  <div>short</div>
  <div>short</div>
  <div>short</div>
</fieldset>

Answer 1

Это связано с странным поведением с fieldset s , и исправлением является изменение определенных свойств CSS, которые браузеры устанавливают на странные значения.Например, в этом примере также прекрасно получается legend.Он работает в Chrome для меня, но вам может понадобиться прочитать исправление , чтобы увидеть, как заставить его работать и в других браузерах.

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">.Будет ли этого достаточно?Процентная ширина не работает.