首頁猿問如何使圖例尊重 FIELDSET 寬度

如何使圖例尊重 FIELDSET 寬度

Html5

烙印99 2023-09-18 10:16:15

我有一個可能加載很長字符串的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>

查看完整描述

1 回答

不負相思意

TA貢獻1777條經(jīng)驗獲得超10個贊

該問題似乎與百分比值有關(guān)。您可以注意到，字段集比圖例大兩倍，因為您正在使用字段集，50%因此字段集根據(jù)圖例內(nèi)容設(shè)置其寬度，然后根據(jù)該寬度解析百分比寬度。

解決方法之一是考慮長度而不是百分比，最接近百分比的是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>

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

</fieldset>

</div>

另一個技巧是將字段集的寬度設(shè)置為長度，這樣它就不會考慮子內(nèi)容。為此，我們可以使用一個較小的值并考慮min-width:100%保持塊行為

fieldset {

display:inline-block;

/* this will do the magic */

width:0;

min-width:100%;

/**/

box-sizing: border-box;

}