如何使图例尊重 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 {

  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>