代码之家 › 专栏 › 技术社区 › AnthonyVO

如何使图例符合字段集宽度

fieldset css html

AnthonyVO · 技术社区 · 6 年前

我有一个 fieldset 用一个 legend 可能会有很长的绳子。

我想要那个 传奇 尊重 字段集 只占用50%的空间。

目前,如果 传奇 如果时间太长,它仍然只会占据50%的市场份额 字段集 但它会迫使 字段集 像整个字符串一样宽。

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>

0 回复 | 直到 6 年前

Temani Afif 6 年前

这个问题似乎与百分比值有关。您可以注意到字段集是图例的两倍,因为您正在使用 50% 因此,字段集根据图例内容设置其宽度,然后根据该宽度解析百分比宽度。

fix的一个想法是考虑长度而不是百分比,最接近百分比的是 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;
}

<部门>
<字段集>
<legend>产品(<span>WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW</span>)</legend>
</fieldset>
</div>