html - 如何使 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%所以字段集根据图例内容设置其宽度，然后根据该宽度解析百分比宽度。

修复的一种想法是考虑长度而不是百分比，最接近百分比的是 vw单元

legend {
  max-width: 50vw;
}

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

另一个技巧是使字段集的宽度成为长度，因此它不考虑子内容。为此，我们可以使用一个小的值并考虑 min-width:100%保持块行为

fieldset {
  display:inline-block;
  /* this will do the magic */   
  width:0;
  min-width:100%;
  /**/
  box-sizing: border-box;
}

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>