如何使图例尊重 FIELDSET 宽度

Question

我有一个可能加载很长字符串的fieldseta 。legend

我希望legend尊重宽度fieldset并只占用 50% 的空间。

目前，如果legend太长，它仍然只占 50%，fieldset但会强制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 {&nbsp; max-width: 50vw;}/* Oversized SPAN content forces the FIELDSET to exceed the 100% width and breaks the layout. */legend span {&nbsp; display: inline-block;&nbsp; width: calc(100% - 100px);&nbsp; overflow: hidden;&nbsp; text-overflow: ellipsis;&nbsp; vertical-align: middle;}<div>&nbsp; <fieldset>&nbsp; &nbsp; <legend>Product (<span>WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW</span>)</legend>&nbsp; </fieldset></div>另一个技巧是将字段集的宽度设置为长度，这样它就不会考虑子内容。为此，我们可以使用一个较小的值并考虑min-width:100%保持块行为fieldset {&nbsp; display:inline-block;&nbsp; /* this will do the magic */&nbsp; &nbsp;&nbsp; width:0;&nbsp; min-width:100%;&nbsp; /**/&nbsp; box-sizing: border-box;}legend {&nbsp; max-width: 50%;}/* Oversized SPAN content forces the FIELDSET to exceed the 100% width and breaks the layout. */legend span {&nbsp; display: inline-block;&nbsp; width: calc(100% - 100px);&nbsp; overflow: hidden;&nbsp; text-overflow: ellipsis;&nbsp; vertical-align: middle;}<div>&nbsp; <fieldset>&nbsp; &nbsp; <legend>Product (<span>WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW</span>)</legend>&nbsp; </fieldset></div>