如何使LEGEND遵守FIELDSET宽度

Question

我有一个fieldset和一个legend，可能装有很长的字符串。

我希望legend尊重fieldset的宽度，只用掉50％的空间。

[当前，如果legend太长，它将仍然仅占据fieldset的50％，但是它将迫使fieldset像显示整个字符串一样宽。

fieldset {
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
}

legend {
  max-width: 50%;
}

/* Oversized SPAN content forces the FIELDSET to exceed the 100% width and breaks the layout. */
legend span {
  display: inline-block;
  width: calc(100% - 100px);
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

<div>
  <fieldset>
    <legend>Product (<span>WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW</span>)</legend>
  </fieldset>
</div>

Answer 1

问题似乎与百分比值有关。您会注意到该字段集比图例大两倍，因为您使用的是50%，因此该字段集是根据图例内容设置其宽度的，然后将百分比宽度与该宽度进行解析。